Front-End-Entwicklungsprogrammierer, wie viel wissen Sie über die Verwendung von CSS3 Tutorial-@font-face zum Implementieren personalisierter Schriftarten? Heute stellen wir Ihnen CSS3 @font-face vor. Wenn Sie interessiert sind, können Sie sich darüber informieren.
Auf Webseiten können wir die Eigenschaft „font-family“ von CSS verwenden, um Schriftarten zu definieren. Ob die definierte Schriftart jedoch korrekt auf dem Computer des Benutzers angezeigt werden kann, hängt davon ab, ob die Schriftart auf dem Computer des Benutzers installiert ist. Wir sehen oft, dass einige ausländische persönliche Websites sehr schöne Schriftarten verwenden, diese Schriftarten jedoch normalerweise nicht auf dem Computer des Benutzers installiert sind, sodass dies nicht mithilfe des Attributs „font-family“ erreicht werden kann. Heute werden wir die Verwendung von @fontface-Implementierungen personalisieren Schriftarten.
CSS3 @font-face-Regeln:
Vor CSS3 mussten Webdesigner Schriftarten verwenden, die bereits auf dem Computer des Benutzers installiert waren.
Mit CSS3 können Webdesigner jede beliebige Schriftart verwenden.
Wenn Sie eine Schriftart finden oder kaufen, die Sie verwenden möchten, können Sie die Schriftartdatei auf dem Webserver speichern und sie wird bei Bedarf automatisch auf den Computer des Benutzers heruntergeladen.
Ihre „eigene“ Schriftart wird in der CSS3-@font-face-Regel definiert.
@font-face unterstützt die folgenden Attribute:
font-family: Legen Sie den Schriftartnamen des Textes fest.
Schriftstil: Textstil festlegen.
font-variant: Legen Sie fest, ob der Text in Groß- oder Kleinbuchstaben geschrieben ist.
Schriftstärke: 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.
Browser-Unterstützung:
Firefox, Chrome, Safari und Opera unterstützen Schriftarten vom Typ .ttf (True Type Fonts) und .otf (OpenType Fonts).
Internet Explorer 9+ unterstützt die neue @font-face-Regel, unterstützt jedoch nur Schriftarten vom Typ .eot (Embedded OpenType).
Hinweis: Internet Explorer 8 und früher unterstützen die neue @font-face-Regel nicht.
Verwenden Sie die Schriftart, die Sie benötigen:
In der neuen @font-face-Regel müssen Sie zuerst den Namen der Schriftart definieren (z. B. myFirstFont) und dann auf die Schriftartdatei verweisen.
Um eine Schriftart für ein HTML-Element zu verwenden, verweisen Sie über das Attribut „font-family“ auf den Namen der Schriftart (myFirstFont):
Beispiel:
<style>
@font-face
{
font-family: myFirstFont;
src: url(‘Sansation_Light.ttf’),
url(‘Sansation_Light.eot’); /* IE9+ */
}
div
{
font-family:myFirstFont;
}
</style>Fett verwenden Schriftart:
Sie müssen einen weiteren @font-face hinzufügen, der einen Deskriptor für fetten Text enthält:
Beispiel:
@font-face
{
font-family: myFirstFont;
src: url(‘Sansation_Bold.ttf’),
url(‘Sansation_Bold.eot’); /* IE9+ */
font-weight:bold;
}Die Datei „Sansation_Bold.ttf“ ist eine weitere A Schriftartdatei, die fette Zeichen für die Sansation-Schriftart enthält.
Der Browser verwendet diese Schriftart immer dann, wenn Text mit der Schriftfamilie „myFirstFont“ fett dargestellt werden muss.
Auf diese Weise können wir viele @font-face-Regeln für dieselbe Schriftart festlegen.
CSS3-Schriftartdeskriptoren:
Die folgende Tabelle listet alle Schriftartdeskriptoren auf, die in der @font-face-Regel definiert werden können:
| Beschreibung | Wert | Beschreibung |
| Schriftfamilie | Name | erforderlich. Gibt den Namen der Schriftart an. |
| src | URL | Erforderlich. Definiert die URL der Schriftartdatei. |
| font-stretch |
normal kondensiert ultra-kondensiert extra-kondensiert halbkondensiert erweitert halberweitert extra-erweitert ultra-erweitert |
Optional. Definiert, wie die Schriftart gestreckt wird. Der Standardwert ist „normal“. |
| Schriftstil |
normal kursiv schräg |
optional . Definieren Sie den Stil der Schriftart. Der Standardwert ist „normal“. |
| Schriftstärke |
normal fett 100 200 300 400 500 600 700 800 900 |
Optional. Definiert die Stärke der Schriftart. Der Standardwert ist „normal“. |
| unicode-range | unicode-range | Optional. Definiert den Bereich der von der Schriftart unterstützten UNICODE-Zeichen. Der Standardwert ist „U+0-10FFFF“. |
Das Obige ist der Inhalt des CSS3-Tutorials – Schriftarten. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn).
