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

101

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

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

Дон П
источник

Ответы:

169

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

бховханнес
источник
Не могли бы вы объяснить, как работают значки материалов; stackoverflow.com/questions/45323577/…
Сунил
16

Вам нужно объявить @font-faceэто в своей таблице стилей

@font-face {
  font-family: 'Awesome-Font';
  font-style: normal;
  font-weight: 400;
  src: local('Awesome-Font'), local('Awesome-Font-Regular'), url(path/Awesome-Font.woff) format('woff');
}

Теперь, если вы хотите применить этот шрифт к абзацу, просто используйте его вот так ...

p {
font-family: 'Awesome-Font', Arial;
}

Больше ссылок

Г-н Чужой
источник
1
для тега src, как в этом случае использовать rel = "preload" для файла woff?
Майк