Jak używać.czcionki woff dla mojej strony?

Gdzie umieszczasz czcionki, aby CSS miał do nich dostęp?

Używam niestandardowych czcionek dla przeglądarki wplik woff. Powiedzmy, że jego 'awesome-font' jest przechowywany w pliku ' awesome-font.woff".

Author: Don P, 2012-10-10
Source

2 answers

Po wygenerowaniu plików WOFF należy zdefiniować rodzinę czcionek, która może być później używana we wszystkich stylach css. Poniżej znajduje się kod do definiowania rodzin czcionek (dla zwykłych, pogrubionych, pogrubionych-italic, italic). Zakłada się, że są 4 *.pliki woff (dla wspomnianych krojów pisma), umieszczone w podkatalogu fonts.

W kodzie 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;
}

Po zapoznaniu się z tymi definicjami można po prostu napisać np.

W kodzie 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>

W CSS kod: 

.mydiv {
    font-family: myfont
}

Dobre narzędzie do generowania plików WOFF, które mogą być zawarte w arkuszach stylów CSS znajduje się tutaj . Nie wszystkie pliki woff działają poprawnie pod najnowszymi wersjami Firefoksa, a ten generator wytwarza 'poprawne' czcionki.

 124
Author: bhovhannes,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-10-10 05:38:50

Musisz zadeklarować @font-face w ten sposób w arkuszu stylów 

@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');
}

Teraz, jeśli chcesz zastosować tę czcionkę do akapitu, po prostu użyj jej w ten sposób..

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

Więcej Referencji

 13
Author: Mr. Alien,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-10-10 05:35:39