Как я использую.WOFF шрифты для моего сайта?

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

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

2 71
html css woff2 fonts

2 ответа:

после генерации файлов woff, вы должны определить font-family, который может быть использован позже во всех ваших стилях css. Ниже приведен код для определения семейств шрифтов (для обычный, полужирный, полужирный курсив, курсив) шрифта. Предполагается, что есть 4 *.файлы woff (для указанных шрифтов), помещенные в fonts поддиректории.

в коде 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, и этот генератор производит "правильные" шрифты.

124

нужно объявить @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;
}

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

13