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 fonts
podkatalogu 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-face
w swoim arkuszu stylówTeraz, jeśli chcesz zastosować tę czcionkę do akapitu, po prostu użyj jej w ten sposób.
Więcej informacji
źródło