我有一个简单的HTML演示页,可以试用我的自定义字体文件(SVG图标的集合)
HTML非常简单,我指定了字体文件的路径(与HTML文件相同的目录)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>nextgenicons</title>
<style>
body {
font-family: sans-serif;
margin: 0;
padding: 10px 20px;
}
.preview {
line-height: 2em;
}
.previewicon {
display: inline-block;
width: 32px;
text-align: center;
}
.icon {
display: inline-block;
font-size: 16px;
}
@font-face {
font-family: "nextgenicons";
src: url("nextgenicons.eot?95d1e9193d97fb68fae3bc44b221fa23?#iefix") format("embedded-opentype"),
url("nextgenicons.woff2?95d1e9193d97fb68fae3bc44b221fa23") format("woff2"),
url("nextgenicons.woff?95d1e9193d97fb68fae3bc44b221fa23") format("woff"),
url("nextgenicons.svg?95d1e9193d97fb68fae3bc44b221fa23#nextgenicons") format("svg");
}
.icon {
line-height: 1;
}
.icon:before {
font-family: nextgenicons !important;
font-style: normal;
font-weight: normal !important;
vertical-align: top;
}
.icon-logo:before {
content: "\f101";
}
.icon-ok:before {
content: "\f102";
}
.icon-settings:before {
content: "\f103";
}
.icon-menu:before {
content: "\f104";
}
</style>
</head>
<body>
<h1>nextgenicons</h1>
<div class="preview">
<span class="previewicon">
<span class=" icon-logo"></span>
</span>
<span>logo</span>
</div>
<div class="preview">
<span class="previewicon">
<span class=" icon-ok"></span>
</span>
<span>ok</span>
</div>
<div class="preview">
<span class="previewicon">
<span class=" icon-settings"></span>
</span>
<span>settings</span>
</div>
<div class="preview">
<span class="previewicon">
<span class=" icon-menu"></span>
</span>
<span>menu</span>
</div>
</body>
</html>
浏览器仅显示正方形代替实际图标:
这是根目录,它同时具有HTML页面和字体文件(请注意,.html是带有IE图标的一个,而另一个带有Chrome图标的是.svg的文件:
]更有趣的是,浏览器根本不获取字体文件。这是页面加载时网络活动的快照:
所以我想显示黑色正方形是因为浏览器未获取字体文件,但为什么会这样呢?
<span class=" icon-logo"></span>
应该为<span class="icon icon-logo"></span>