Wie verwende ich .woff-Schriftarten für meine Website?

Wo platzieren Sie Schriftarten, damit CSS darauf zugreifen kann?

Ich verwende nicht standardmäßige Schriftarten für den Browser in einer .woff-Datei. Angenommen, die 'awesome-font' ist in einer Datei 'awesome-font.woff' gespeichert.

Nach der Generierung von Woff-Dateien müssen Sie die Schriftfamilie definieren, die später in all Ihren CSS-Stilen verwendet werden kann. Unten finden Sie den Code zum Definieren von Schriftfamilien (für normale, fette, fette, kursive, kursive) Schriftarten. Es wird davon ausgegangen, dass 4 * .woff-Dateien (für die genannten Schriftarten) im fontsUnterverzeichnis abgelegt sind .

Im 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 Sie diese Definitionen erhalten haben, können Sie beispielsweise einfach schreiben:

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

Im CSS-Code:

.mydiv {
    font-family: myfont
}

Die gute Werkzeug zur Erzeugung woff - Dateien, die in CSS - Stylesheets enthalten sein können , befindet sich hier . Nicht alle Woff-Dateien funktionieren unter den neuesten Firefox-Versionen ordnungsgemäß, und dieser Generator erzeugt "korrekte" Schriftarten.

Sie müssen @font-facedies in Ihrem Stylesheet deklarieren

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

Wenn Sie diese Schriftart auf einen Absatz anwenden möchten, verwenden Sie sie einfach wie folgt.

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

Weitere Referenz