Bunte personalisierte CSS3-Schriftarten

Beim Erstellen von Seiten verwenden wir häufig „font-family“, um Schriftarten zu definieren. Ob die Schriftarten, die wir mit „font-family“ definieren, jedoch im Browser des Benutzers gerendert werden können, hängt vom Computer des Benutzers ab . Ob die von uns definierten Schriftarten darauf installiert sind. Im Internet können wir oft feststellen, dass einige ausländische Websites einige ungewöhnliche und schöne Schriftarten verwenden und diese Schriftarten im Allgemeinen nicht auf den Computern der Benutzer installiert sind. Daher stellen wir heute vor, wie man sie auf der Seite verwendet Der Computer des Benutzers.

css3 @font-face

Es ist eigentlich ungenau zu sagen, dass @font-face ein neues Attribut von CSS3 ist, da diese Funktion bereits in CSS2 unterstützt wird und IE5 bereits damit begonnen hat unterstützen es, aber die Art und Weise, wie es im IE implementiert wird, erfolgt über das EOT-Schriftartformat. Leider unterstützen andere Browser dieses Format nicht.

Auf Webseiten können wir das Attribut font-family von CSS verwenden, um Schriftarten zu definieren. Ob die definierte Schriftart jedoch auf dem Computer des Benutzers korrekt angezeigt werden kann, hängt davon ab, ob der Computer des Benutzers korrekt ist Habe die Schriftart installiert. Wir sehen oft, dass einige ausländische persönliche Websites sehr schöne Schriftarten verwenden, aber diese Schriftarten sind normalerweise nicht auf dem Computer des Benutzers installiert, sodass dies nicht mit dem Attribut „font-family“ erreicht werden kann. Heute werden wir die Verwendung personalisierter Schriftarten vorstellen .

CSS3 @font-face

Es ist nicht korrekt zu sagen, dass @font-face eine neue Funktion von CSS3 ist, da CSS2 diese Funktion bereits unterstützt . Und Internet Explorer hat es bereits in Version 5 unterstützt, aber IE implementiert es über sein eigenes EOT-Schriftformat (Embeded Open Type), und andere Browser unterstützen dieses Format nicht. @font-face unterstützt die folgenden Attribute:

Font-family: Legen Sie den Schriftartnamen des Textes fest.
　font-style: Textstil festlegen.
　font-variant: Legen Sie fest, ob der Text in Groß- oder Kleinbuchstaben geschrieben ist.
　font-weight: Legen Sie die Dicke des Textes fest.
　font-stretch: Legen Sie fest, ob der Text horizontal gestreckt wird.
　Schriftgröße: Legen Sie die Schriftgröße des Textes fest.
　src: Legen Sie den relativen oder absoluten Pfad der benutzerdefinierten Schriftart fest.
@font-face-Browserkompatibilität ist wie folgt:

Ein einfaches Beispiel

Deklarieren Sie zuerst einen Namen Für die Schriftart ChantelliAntiquaRegular gibt es eine alte Schreibweise wie folgt:

@font-face {
    font-family: "ChantelliAntiquaRegular";
    src: url("Chantelli_Antiqua-webfont.eot");
    src: local("☺"), url("Chantelli_Antiqua-webfont.woff") format("woff"), url("Chantelli_Antiqua-webfont.ttf") format("truetype"), url("Chantelli_Antiqua-webfont.svg#webfontZjhIjbDc") format("svg");
    font-weight: normal;
    font-style: normal;
}

Der erste Quellcode ist mit IE kompatibel und der zweite Quellcode ist mit kompatibel andere Browser. local("☺") ist eine Hack-Schreibmethode, um das Laden von Schriftarten vom Client zu vermeiden. Die Verbesserungslösung besteht darin, zwei @font-face wie folgt zu deklarieren:

@font-face {
    font-family: "ChantelliAntiquaRegular";
    src: url("Chantelli_Antiqua-webfont.eot");
}
 
@font-face {
    font-family: "ChantelliAntiquaRegular";
    src: url(//:) format("no404"), url("Chantelli_Antiqua-webfont.woff") format("woff"), url("Chantelli_Antiqua-webfont.ttf") format("truetype"), url("Chantelli_Antiqua-webfont.svg#webfontMFqI76bT") format("svg");
    font-weight: normal;
    font-style: normal;
}

Wir deklarieren zunächst eine @font-face, die auf die eot-Schriftartdatei verweist, um sicherzustellen, dass sie im IE ordnungsgemäß funktioniert. Die zweite @font-face referenziert aus Kompatibilitätsgründen mehrere Schriftartformate werden nacheinander suchen, bis sie ein unterstütztes Format finden, was bedeutet, dass dieselbe Schriftart in mehreren Formaten verfügbar sein muss. url(//:) format("no404") ist eine Bulletproof-Schreibmethode.

Andere HTML- und CSS-Codes sind wie folgt:

.font-face-display {
    font: 66px ChantelliAntiquaRegular, Helvetica, sans-serif;
}
 
<p class="font-face-display">Take me to your heart</p>

Der wichtigste Effekt ist wie folgt:

Kostenlose Schriftarten-Website Font Squirrel

Font Squirrel ist eine ausgezeichnete kostenlose Schriftarten-Ressourcen-Website, die viele hochwertige Schriftarten für Webdesigner zum kostenlosen Herunterladen sammelt. Es gibt auch Das Tool zur Generierung von Schriftartformaten @font-face Generator kann durch Hochladen einer Schriftartdatei mehrere Schriftartformate und CSS-Codes generieren, was sehr nützlich ist. Wenn Sie tolle kostenlose englische Schriftarten benötigen, sind Sie hier genau richtig.

Wenn Sie eine farbenfrohe Seite wünschen, benötigen Sie mehr Schriftartenalternativen. Zusätzlich zur @font-face-Lösung gibt es auch sIFR, Cufon, Typeface.js usw. und .webfont verfügen vereinfacht gesagt über eine in die Schriftart eingebettete Zugriffsberechtigungstabelle. Der Browser kann diese Berechtigungsinformationen lesen und entscheiden, ob diese Schriftarten heruntergeladen und gerendert werden sollen. Darüber hinaus ist auch Typekit eine erwähnenswerte Lösung, die Schriftarten auf einem Drittserver zum Aufruf bereitstellt. Die Vor- und Nachteile dieser Lösungen werden später im Detail vorgestellt.

Das obige ist der detaillierte Inhalt vonBunte personalisierte CSS3-Schriftarten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!