Как мне использовать шрифты .woff для моего сайта?

Где вы размещаете шрифты, чтобы CSS мог получить к ним доступ?

Я использую нестандартные шрифты для браузера в файле .woff. Допустим, его 'awesome-font' хранится в файле 'awesome-font.woff'.

77 голосов | спросил Don P 10 +04002012-10-10T09:22:29+04:00312012bEurope/MoscowWed, 10 Oct 2012 09:22:29 +0400 2012, 09:22:29

1 ответ


0

После генерации 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, и этот генератор генерирует «правильные» шрифты.

ответил bhovhannes 10 +04002012-10-10T09:29:25+04:00312012bEurope/MoscowWed, 10 Oct 2012 09:29:25 +0400 2012, 09:29:25

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132