Heim  >  Artikel  >  Web-Frontend  >  CSS3-Tutorial-Schriftarten

CSS3-Tutorial-Schriftarten

黄舟
黄舟Original
2016-12-27 15:53:451664Durchsuche

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:

CSS3-Tutorial-Schriftarten

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


Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel:CSS3-Tutorial-TexteffektNächster Artikel:CSS3-Tutorial-Texteffekt