CSS3 @font-faceRegeln

Beispiel

Geben Sie eine Schriftart namens "myFirstFont" an und geben Sie die URL an, unter der sie gefunden werden kann:

@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
url('Sansation_Light.eot'); /* IE9 */
}

Browser-Unterstützung

Internet Explorer 9, Firefox, Opera, Chrome und Safari unterstützen @font-face-Regeln.

Allerdings unterstützt Internet Explorer 9 nur Schriftarten vom Typ .eot, während Firefox, Chrome, Safari und Opera sowohl .ttf- als auch .otf-Schrifttypen unterstützen.

Hinweis:Internet Explorer 8 und frühere IE-Versionen unterstützen die @font-face-Regel nicht.

Eigenschaftsdefinition und Verwendungshinweise

Die @font-face-Regel, eine der Regeln, durch die Webdesigner keine "websicheren" Schriftarten mehr verwenden müssen.

Der Name der Schriftart, @font-face-Regel:

font-family: myFirstFont;

Die Schriftdatei befindet sich irgendwo auf Ihrem Server, siehe CSS:

src: url('Sansation_Light.ttf')

Wenn sich die Schriftdatei an einem anderen Ort befindet, verwenden Sie die vollständige URL:

src: url('http://www.w3cschool.css/css3/Sansation_Light.ttf')

Nun kann die Schrift verwendet werden. Hier ist ein Beispiel, wie sie auf alle div-Elemente angewendet wird:

div
{
font-family: myFirstFont;
}

Syntax:

font-properties

Das folgende Beispiel zeigt eine Schrift, die in einem div verwendet wird:

div
{
font-family: myFirstFont;
}

Syntax

@font-face
{
font-properties
}

Schriftbeschreibung	Wert	Beschreibung
font-family	name	Erforderlich. Definiert den Namen der Schrift.
src	URL	Erforderlich. Definiert die URL(s), von denen die Schrift heruntergeladen wird.
font-stretch	normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded	Optional. Definiert, wie die Schrift gestreckt werden soll. Der Standardwert ist "normal"
font-style	normal italic oblique	Optional. Definiert, welchen Stil die Schrift haben soll. Der Standardwert ist "normal"
font-weight	normal bold 100 200 300 400 500 600 700 800 900	Optional. Definiert die Schriftstärke der Schriftart. Der Standardwert ist "normal"
unicode-range	unicode-range	Optional. Definiert den Bereich der Unicode-Zeichen, die die Schriftart unterstützt. Der Standardwert ist "U+0-10FFFF"

CSS Eigenschaft