Jak używać czcionek .woff w mojej witrynie internetowej?

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

Używam niestandardowych czcionek dla przeglądarki w pliku .woff. Powiedzmy, że jego „awesome-font” jest przechowywana w pliku „awesome-font.woff”.

Po wygenerowaniu plików woff musisz zdefiniować rodzinę czcionek, która może być później używana we wszystkich stylach CSS. Poniżej znajduje się kod służący do definiowania rodzin czcionek (dla krojów normalnych, pogrubionych, pogrubionych i kursywy). Zakłada się, że w fontspodkatalogu znajdują się 4 pliki * .woff (dla wymienionych krojów) .

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

Mając te definicje, możesz po prostu napisać na przykład

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 kodzie CSS:

.mydiv {
    font-family: myfont
}

Dobre narzędzie do generowania plików woff, które można dołączyć do arkuszy stylów CSS, znajduje się tutaj . Nie wszystkie pliki woff działają poprawnie w najnowszych wersjach przeglądarki Firefox, a ten generator tworzy „poprawne” czcionki.

Musisz to zadeklarować @font-facew swoim 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 informacji