Wie verwende ich .woff Fonts für meine Website?

Question

Wo platzierst du Schriftarten, damit CSS darauf zugreifen kann?

Ich verwende nicht-Standard-Schriftarten für den Browser in einer .woff-Datei. Nehmen wir an, dass es sich um eine 'awesome-font' handelt, die in einer Datei 'awesome-font.woff' gespeichert ist.

Answer 1

Nach der Erstellung von Woff-Dateien müssen Sie die Schriftart-Familie definieren, die später in allen Ihren CSS-Stilen verwendet werden kann. Unten ist der Code zum Definieren von Schriftfamilien (für normal, fett, fett-kursiv, kursiv). Es wird angenommen, dass es 4 * .woff-Dateien (für die erwähnten Schriften) gibt, die im fonts Unterverzeichnis abgelegt sind.

In CSS-Code:

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

Nachdem die Definitionen, können Sie einfach schreiben, zum Beispiel

In HTML-Code:

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

In CSS-Code:

.mydiv { 
    font-family: myfont 
} 

Das gute Werkzeug für die Generierung von Woff-Dateien, die in CSS-Stylesheets enthalten sein können, befindet sich here. Nicht alle woff-Dateien funktionieren unter den neuesten Firefox-Versionen korrekt und dieser Generator erzeugt "korrekte" Schriften.

Answer 2

Sie müssen in Ihrem Stylesheet

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

Jetzt @font-face so erklären, wenn Sie diese Schriftart auf einen Absatz anwenden möchten einfach wie diese verwenden ..

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

More Reference