У меня есть простая 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>
Браузер отображает квадраты вместо реальных значков:
Вот каталог root, он содержит как страницу HTML, так и файлы шрифтов (обратите внимание, что html - это значок со значком IE, другой со значком Chrome - .svg file):
Что еще интереснее, браузер вообще не получает файлы шрифтов. Вот снимок сетевой активности при загрузке страницы:
Итак, я предполагаю, что черные квадраты отображаются, потому что браузер не выбирает файл шрифта а почему так?