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

100

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”.

Don P.
źródło

Odpowiedzi:

168

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.

bhovhannes
źródło
Czy możesz wyjaśnić, jak działają ikony materialne; stackoverflow.com/questions/45323577/…
Sunil Garg,
16

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

Mr. Alien
źródło
1
dla tagu src, w jaki sposób można użyć rel = "preload" dla pliku woff w tym przypadku?
Mike