Latest web development tutorials

CSS3 Font

Mit CSS3, Web-Designer werden nicht mehr gezwungen, nur Web-Safe-Fonts zu verwenden

Regeln CSS3 @ font-face

Frühere Versionen von CSS3, Web-Designer hatten auf dem Computer des Benutzers zu verwenden, ist bereits Schriftarten installiert.

Verwenden Sie CSS3, Web-Designer können verwenden, was font er / sie mag.

Wenn Sie die Datei, die Sie finden wollen, um die Schriftart zu verwenden, wird die Schriftart-Datei einfach in die Website aufgenommen werden, wird es automatisch auf die Bedürfnisse der Nutzer heruntergeladen werden.

Schriftart Ihrer Wahl in der neuen Version auf CSS3 @ font-face-Regel Beschreibung.

Ihre "eigene" Schriftarten sind in der CSS3 @ font-face-Regel definiert.


Browser-Unterstützung

Die Zahlen in der Tabelle stellen die erste Browser die Versionsnummer der Immobilie zu unterstützen.

属性
@font-face 4.0 9.0 3.5 3.2 10.0

Internet Explorer 9+, Firefox, Chrome, Safari und Opera unterstützen WOFF (Web Open Font Format) Schriften.

Firefox, Chrome, Safari und Opera unterstützen Ttf (True Type Schriften) und OTF (Opentype) Schriftart Schrifttyp).

Chrome, Safari und Opera auch SVG-Fonts unterstützen / kollabiert.

Internet Explorer unterstützt auch EOT (Embedded Opentype) Fonts.

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


Sie müssen die Schriftart zu verwenden

In der neuen @ font-face-Regel, müssen Sie zuerst den Namen der Schriftart (wie myFirstFont), zu definieren und dann auf die Font-Datei verweisen.

Lampe Tipp: URL Klein Schrift, Großbuchstaben in IE verwenden zu unerwarteten Ergebnissen führen

Um die Schriftart für HTML-Element zu verwenden, um den Namen der Schriftart (myFirstFont) von font-family Eigenschaften zu beziehen:

OperaSafariChromeFirefoxInternet Explorer

Beispiele

<style>
@font-face
{
font-family: myFirstFont;
src: url(sansation_light.woff);
}

div
{
font-family:myFirstFont;
}
</style>

Versuchen »


Verwenden Sie fett gedruckten Text

Sie müssen eine andere @ font-face-Regel fügen Sie den fett gedruckten Text enthält:

OperaSafariChromeFirefoxInternet Explorer

Beispiele

@font-face
{
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight:bold;
}

Versuchen »

Die Datei "Sansation_Bold.ttf" ist eine andere Schriftart-Datei, die Sansation Fettdruck Font.

Mit diesem Browser Text Schriftfamilie Zeit "myFirstFont" sollte so fett gemacht werden.

So können Sie viele der gleichen Schriftart @ font-face-Regel haben.


CSS3 Schriftartbeschreibung

Die folgende Tabelle listet alle Schriftartbeschreibung und das Innere der @ font-face-Regel-Definition:

Descriptors Wert Beschreibung
font-family Name Erforderlich. Die Bestimmungen des Schriftnamen.
src URL Erforderlich. Definierte URL Schriftdatei.
font-stretch
  • normal
  • kondensiert
  • Ultra kondensiert
  • extra kondensiert
  • semi-kondensierte
  • ergänzt
  • semi-expandierte
  • extra erweitert
  • Ultra erweitert
Optional. Definieren Sie, wie die Schrift zu zeichnen. Der Standardwert ist "normal".
font-style
  • normal
  • kursiv
  • schräg
Optional. Legt den Schriftstil. Der Standardwert ist "normal".
font-weight
  • normal
  • fett
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
Optional. Eine benutzerdefinierte Schriftstärke. Der Standardwert ist "normal".
Unicode-Bereich Unicode-Bereich Optional. Custom-Font-Unterstützung UNICODE-Zeichenbereich. Die Standardeinstellung ist "U + 0-10FFFF".