Obwohl ein HTML5-Web-Entwickler jede Schriftart für eine Webseite vorschlagen können, sind die Font-Dateien traditionell ein Client-Ebene Asset. Wenn der Kunde nicht die Schriftart installiert ist, wird sie es nicht sehen. Glücklicherweise unterstützt CSS3 eine vernünftige Lösung für herunterladbare Schriften bietet.

Der Stil funktioniert nicht wie die meisten CSS-Elemente. Sie gilt nicht Markup zu einem gewissen Teil der Seite. Stattdessen bildet sie einen neuen CSS-Wert, in anderen markup verwendet werden können. Genauer gesagt, es können Sie eine Font-Datei auf dem Server zu platzieren und eine Schriftfamilie mit, dass Schriftart definieren.

 @ Font-face {font-family: "Miama" -src: url ( "Miama.otf") -}

Das Schriftfamilie Attribut gibt den Namen, den Sie diese Schriftart in den Rest Ihres CSS-Code geben werden. Normalerweise ist es für die Schriftart Dateinamen ähnlich. Das Schriftfamilie Attribut ist die URL der Font-Datei, wie es auf dem Server nicht gefunden wird. Nach einer font-face definiert wurde, kann es in einem gewöhnlichen Attribut in den Rest Ihres CSS-Code verwendet werden:

 h1 {font-family: Miama-}

Hier ist der Code für die benutzerdefinierte Schriftart Beispiel:

Embedded Font Demo
Hier ist eine andere benutzerdefinierte Schriftart

Obwohl alle modernen Browser unterstützen die @Schriftart Funktion, die tatsächlichen Dateitypen werden unterstützt variieren von Browser zu Browser. Hier sind die wichtigsten Schriftarten:

• TTF: Die Standard-Truetype-Format ist gut unterstützt, aber nicht von allen Browsern. Viele Open-Source-Schriften sind in diesem Format zur Verfügung.

• OTF: Dies ist vergleichbar mit TTF, ist aber ein wirklich offener Standard, so wird es durch diejenigen bevorzugt, die in offenen Standards interessiert sind. Es wird von den meisten Browsern außer IE unterstützt.

• WOFF: WOFF ist eine vorgeschlagene Standardformat derzeit von Firefox unterstützt. Microsoft hat auf die Unterstützung dieses Format in IE angedeutet.

• EOT: Dies ist Microsofts proprietären Embedded-Font-Format. Es funktioniert nur im IE, aber um fair zu sein, hat Microsoft-Font-Unterstützung für viele Jahre eingebettet hatte.

Sie können eine Schriftart-Konvertierungstool verwenden, wie onlinefontconverter.com/ Format konvertieren, was auch immer Schriftart Sie bevorzugen.

Es ist möglich, mehrere zu liefern src Attribute. Auf diese Weise können Sie sowohl eine EOT und OTF-Version einer Schrift enthalten, so dass sie auf einer Vielzahl von Browsern funktionieren.

Wenn Sie diese Technik verwenden, müssen Sie lokal eine Kopie der Font-Datei zu haben. Es sollte als Web-Seite im selben Verzeichnis sein. Wenn Sie auf einem Web-Server beginnen Hosting, werden Sie wollen Ihre Font-Datei auf den Server zu bewegen, zusammen mit allen anderen Ressourcen, um Ihre Web-Seite benötigt. Nur weil Sie eine Schriftart enthalten kann, bedeutet nicht, Sie sollten. Denken Sie sorgfältig über die Lesbarkeit.

Auch seien Sie respektvoll von geistigem Eigentum. Zum Glück gibt es viele ausgezeichnete kostenlose Open-Source-Fonts zur Verfügung. Beginnen Sie, indem Sie auf Open Font Library. Google Fonts ist eine weitere große Ressource für freie Schriftarten. Mit dem Google Font-Tool können Sie eine Schriftart auswählen eingebettet auf den Google-Servern, und Sie können Code kopieren, die die Schriftart ohne Download zur Verfügung stellt.