Где вы размещаете шрифты, чтобы CSS мог получить к ним доступ?
Я использую нестандартные шрифты для браузера в файле .woff. Скажем, его «awesome-font» хранится в файле «awesome-font.woff».
После генерации файлов woff вам необходимо определить семейство шрифтов, которое можно будет использовать позже во всех ваших стилях CSS. Ниже приведен код для определения семейств шрифтов (для обычного, полужирного, полужирного курсива, курсива) гарнитур. Предполагается, что в fonts
подкаталоге размещено 4 файла * .woff (для указанных гарнитур) .
В коде CSS:
@font-face {
font-family: "myfont";
src: url("fonts/awesome-font.woff") format('woff');
}
@font-face {
font-family: "myfont";
src: url("fonts/awesome-font-bold.woff") format('woff');
font-weight: bold;
}
@font-face {
font-family: "myfont";
src: url("fonts/awesome-font-boldoblique.woff") format('woff');
font-weight: bold;
font-style: italic;
}
@font-face {
font-family: "myfont";
src: url("fonts/awesome-font-oblique.woff") format('woff');
font-style: italic;
}
Получив эти определения, вы можете просто написать, например,
В HTML-коде:
<div class="mydiv">
<b>this will be written with awesome-font-bold.woff</b>
<br/>
<b><i>this will be written with awesome-font-boldoblique.woff</i></b>
<br/>
<i>this will be written with awesome-font-oblique.woff</i>
<br/>
this will be written with awesome-font.woff
</div>
В коде CSS:
.mydiv {
font-family: myfont
}
Хороший инструмент для создания woff-файлов, которые можно включить в таблицы стилей CSS, находится здесь . Не все файлы woff корректно работают в последних версиях Firefox, и этот генератор производит «правильные» шрифты.
Вам нужно объявить
@font-face
это в своей таблице стилейТеперь, если вы хотите применить этот шрифт к абзацу, просто используйте его вот так ...
Больше ссылок
источник