Es gibt zwei Methoden, mit denen Sie die Ubuntu-Schriftart in Ihre Website einbetten können - mithilfe des Google-Schriftartverzeichnisses (bevorzugt) oder mithilfe der @font-faceCSS-Deklaration und manuellem Konvertieren Ihrer Schriftarten.
Verwendung von Google Webfonts
Sie können die Ubuntu-Schriftart jetzt als Google-Webschrift verwenden. Dies wird den Prozess viel einfacher machen. Der größte Teil des Inhalts dieses Teils der Antwort stammt aus Sladens Antwort .
Warum ist die Verwendung der Google Font-API die bevorzugte Methode?
Die Verwendung der Google Font-API ist ein hervorragender Vorschlag, da Webfonts in allen modernen Browsern automatisch ausgeführt werden können, ohne sich um Details kümmern zu müssen. Wenn Sie die Schriftart-API verwenden, wird den Besuchern immer automatisch die neueste Version der Schriftart angezeigt.
Wie kann ich die Google Font API verwenden?
Seit dem 21. Dezember 2010 ist die Ubuntu-Schriftfamilie in der Google Font API enthalten und kann dort bereitgestellt werden. Besuchen Sie:
Sie können die Google Web Font-Veröffentlichung zu den Nachrichten lesen und dann:
- Öffnen Sie das Google-Schriftartverzeichnis: " Ubuntu - Verwenden Sie diese Schriftart "
Kreuzen Sie die für Ihre Webseite erforderliche Kombination von Gewichten und Stilen aus "Normal", "Kursiv", "Fett" und "Fett-Kursiv" an.
Wenn die Standardeinstellung nicht korrekt ist, wählen Sie die gewünschte Sprach- / Skriptkombination aus: Auf einer russischen Website mit englischen Beispielen wird möglicherweise "Kyrillisch, Lateinisch" verwendet.
Fügen Sie das angegebene <link>Tag <head> ... </head>in Ihre HTML - Seite oder Vorlagen ein und fügen Sie den entsprechenden CSS - Code zwischen den <style> ... </style>Tags in Ihre ein <head>.
Wenn Sie beispielsweise die russisch / englische Hybrid-Website erstellen und die Schriftart als Standard für den gesamten Text verwenden möchten, können Sie den folgenden Code zwischen Ihre <head>Tags einfügen :
<link href='http://fonts.googleapis.com/css?family=Ubuntu&subset=cyrillic,latin' rel='stylesheet' type='text/css' />
<style type="text/css" >
body {
font-family : 'Ubuntu', sans-serif;
}
</style>
Anmerkungen :
"Latin" ist die Schrift , in der Englisch und viele andere europäische und afrikanische Sprachen geschrieben sind.
"Subsetting" optimiert die Schriftdateien, indem nur Zeichen für bestimmte Sprachen gesendet werden. Die Schriftarten sind jeweils ca. 44 kB groß. Die derzeit angezeigte Zahl von 168 KB gilt für alle mehr als 1.200 Glyphen als Download einer einzelnen Webschrift - und die meisten werden für eine einzelne Website nicht benötigt.
Die Ubuntu-Schriftdateien werden für verschiedene Browser automatisch in das richtige Format konvertiert. je nach Marke und Version das gewünschte Format ist WOFF, EOT, SVGoder TTF. Die richtige Kombination von CSS ist spezifisch für jede Seitenanforderung und löst dieses schwierige Problem auf magische Weise.
@ Font-face verwenden
Sie können die Ubuntu-Schriften einbetten, indem Sie sie in WOFF-Schriften konvertieren . Sie können sie dann mithilfe der CSS @ font-face-Deklaration einbetten. Die Schriftarten (.ttf-Dateien) finden Sie in /usr/share/fonts/truetype/ubuntu-font-family.
Verwenden Sie zum Verwenden der Ubuntu Regular-Schriftart, die in eine WOFF-Datei, Ubuntu-R.woff, konvertiert wurde, diesen CSS-Code:
@font-face
{
font-family : "Ubuntu-R";
src: url('Ubuntu-R.woff');
}
Ähnliches gilt für Ubuntu Bold:
@font-face
{
font-family : "Ubuntu";
src: url('Ubuntu-B.woff');
font-weight : bold;
}
Ubuntu kursiv:
@font-face
{
font-family : "Ubuntu";
src: url('Ubuntu-I.woff');
font-style : italic;
}
Ubuntu Fett Kursiv:
@font-face
{
font-family : "Ubuntu";
src: url('Ubuntu-BI.woff');
font-weight : bold;
font-style : italic;
}
Dies wird von allen aktuellen Browsern unterstützt .
Überlegungen
Bitte denken Sie daran, dass einige Benutzer ihre Browser so einrichten, dass sie einen bestimmten Satz von Schriftarten verwenden. Dies kann ärgerlich sein, wenn benutzerdefinierte Schriftarten verwendet werden. Lesen Sie auch die Ubuntu-Lizenz für Schriftarten, um genaue Bedingungen für die Verteilung der Schriftarten zu erhalten.
Die Verwendung der Google Font-API ist ein hervorragender Vorschlag, da Webfonts in allen modernen Browsern automatisch ausgeführt werden können, ohne sich um Details kümmern zu müssen. Wenn Sie die Schriftart-API verwenden, wird den Besuchern immer automatisch die neueste Version der Schriftart angezeigt.
Seit dem 21. Dezember 2010 ist die Ubuntu-Schriftfamilie in der Google Font API enthalten und kann dort bereitgestellt werden. Besuchen Sie:
Sie können die Google Web Font-Veröffentlichung zu den Nachrichten lesen und dann:
<head> ... </head>und<style>...</style>Ihrer HTML-Seite oder -Vorlagen ein.Anmerkungen:
"Latin" ist die Schrift , in der Englisch und viele andere europäische und afrikanische Sprachen geschrieben sind.
"Subsetting" optimiert die Schriftdateien, indem nur Zeichen für bestimmte Sprachen gesendet werden. Die Schriftarten sind jeweils ca. 44 kB groß. Die derzeit angezeigte Zahl von 168 KB gilt für alle mehr als 1.200 Glyphen als Download einer einzelnen Webschrift - und die meisten werden für eine einzelne Website nicht benötigt.
Die Ubuntu-Schriftdateien werden für verschiedene Browser automatisch in das richtige Format konvertiert. je nach Marke und Version das gewünschte Format ist
WOFF,EOT,SVGoderTTF. Die richtige Kombination von CSS ist spezifisch für jede Seitenanforderung und löst dieses schwierige Problem auf magische Weise.quelle
Das serverseitige Rendern von Schriftarten (vielleicht besser "dynamisches Rendern von Schriftarten") ist seit geraumer Zeit ein interessantes Thema.
Technisch gesehen erscheint es logisch, dass ein Computer, der eine bestimmte Schriftart anzeigen möchte, bereits lokal installiert sein muss.
Auf der anderen Seite verliert das Webdesign viel, weil es sich an die grundlegenden / bekannten 'Web-Schriften' halten muss.
CSS2.1 haben einige Verbesserungen durch die Verwendung gemacht @ font-face - Regel Erklärung.
Es ist noch kein Standard, aber es wird irgendwann mit CSS3.
Daneben gab es einige alternative Methoden, wie zum Beispiel:
Ich hoffe, die angegebenen Links geben Ihnen eine bessere Vorstellung davon, was getan werden kann ;-)
quelle