
Berücksichtigt werden Lizenzen wie:
Wie kann ich die Ubuntu-Schriftfamilie auf einer Website verwenden, ohne dass der Benutzer sie installieren muss?
Gibt es eine Möglichkeit, sie mit Tools wie diesen zu verwenden:http://code.google.com/intl/en-US/apis/webfonts/
Antwort1
Es gibt zwei Methoden, mit denen Sie die Ubuntu-Schriftart in Ihre Website einbetten können: mithilfe des Google Font Directory (bevorzugt) oder mithilfe der @font-face
CSS-Deklaration und manuellem Konvertieren Ihrer Schriftarten.
Verwendung von Google Webfonts
Sie können jetzt die Ubuntu-Schriftart als Google-Web-Schriftart verwenden. Dies wird den Vorgang erheblich vereinfachen. Der Großteil des Inhalts dieses Teils der Antwort stammt vonsladens Antwort.
Warum ist die Verwendung der Google Font API die bevorzugte Methode?
Die Verwendung der Google Font API ist ein hervorragender Vorschlag, da Webfonts damit automatisch auf allen modernen Browsern funktionieren, ohne dass man sich um die Details kümmern muss. Die Verwendung der Font-API bedeutet, dass Besucher immer dieneuesteVersion der Schriftart automatisch.
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 darüber bereitgestellt werden. Besuchen Sie:
Du kannst lesender Google Web Font-Beitragüber die Neuigkeiten, und dann:
Öffnen Sie das Google Font-Verzeichnis: "Ubuntu - Diese Schriftart verwenden" Seite
Aktivieren Sie die Kombination ausGewichte und Stileaus den Formaten Normal, Kursiv, Fett und Fett-Kursiv, die Sie für Ihre Webseite benötigen.
Wenn die Vorgabe falsch ist, wählen Sie dieSprach-/SchriftkombinationSie benötigen: Eine russische Website mit englischen Beispielen verwendet möglicherweise „Kyrillisch, Latein“.
Fügen Sie das angegebene
<link>
Tag zwischen<head> ... </head>
Ihrer HTML-Seite oder Ihren Vorlagen ein und fügen Sie den entsprechenden CSS-Code zwischen<style> ... </style>
den Tags in Ihrem ein<head>
.Wenn Sie beispielsweise eine russisch-englische Hybrid-Website erstellen und diese Schriftart als Standard für den gesamten Text verwenden möchten, können Sie zwischen Ihren
<head>
Tags den folgenden Code hinzufü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:
"Latein" ist dieSkriptin 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 Schriften sind jeweils etwa 44 kB groß. Die derzeit angezeigte Zahl von 168 kB gilt für alle über 1.200 Glyphen als einzelner Web-Schrift-Download – und die meisten werden für eine einzelne Website nicht benötigt.
Die Ubuntu-Schriftdateien werden automatisch in das richtige Format für verschiedene Browser konvertiert. Je nach Hersteller und Version ist das erforderliche Format WOFF
, EOT
, SVG
oder TTF
. Die richtige CSS-Kombination ist spezifisch für jede Seitenanforderung und löst dieses schwierige Problem auf magische Weise.
Verwenden von @font-face
Sie können die Ubuntu-Schriftarten einbetten, indem SieKonvertieren Sie sieZuWOFF-Schriftarten. Sie können sie dann mit der CSS-Deklaration @font-face einbetten. Die Schriftarten (.ttf-Dateien) finden Sie in /usr/share/fonts/truetype/ubuntu-font-family
.
Um beispielsweise die Schriftart Ubuntu Regular zu verwenden, die in eine WOFF-Datei (Ubuntu-R.woff) konvertiert wurde, verwenden Sie 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 unterstütztaktuelle Browser.
Überlegungen
Bitte beachten Sie, dass manche Benutzer ihre Browser so einrichten, dass sie einen bestimmten Satz von Schriftarten verwenden, und sich möglicherweise darüber ärgern, wenn benutzerdefinierte Schriftarten verwendet werden. Lesen Sie auch dieUbuntu-Schriftartenlizenzfür die genauen Bedingungen zur Verbreitung der Schriftart.
Antwort2
Die Verwendung der Google Font API ist ein hervorragender Vorschlag, da Webfonts damit automatisch auf allen modernen Browsern funktionieren, ohne dass man sich um die Details kümmern muss. Die Verwendung der Font-API bedeutet, dass Besucher immer dieneuesteVersion der Schriftart automatisch.
Seit dem 21. Dezember 2010 ist die Ubuntu-Schriftfamilie in der Google Font API enthalten und kann darüber bereitgestellt werden. Besuchen Sie:
Du kannst lesender Google Web Font-Beitragüber die Neuigkeiten, und dann:
- Öffnen Sie das Google Font-Verzeichnis: "Ubuntu - Diese Schriftart verwenden" Seite
- Aktivieren Sie die Kombination ausGewichte und Stileaus den Formaten Normal, Kursiv, Fett und Fett-Kursiv, die Sie für Ihre Webseite benötigen.
- Wenn die Vorgabe falsch ist, wählen Sie dieSprach-/SchriftkombinationSie benötigen: Eine russische Website mit englischen Beispielen verwendet möglicherweise „Kyrillisch, Latein“.
- Kopieren und einfügenzwei Zeilen CSSin die
<head> ... </head>
und<style>...</style>
Abschnitte Ihrer HTML-Seite oder Vorlagen.
Anmerkungen:
"Latein" ist dieSkriptin 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 Schriften sind jeweils etwa 44 kB groß. Die derzeit angezeigte Zahl von 168 kB gilt für alle über 1.200 Glyphen als einzelner Web-Schrift-Download – und die meisten werden für eine einzelne Website nicht benötigt.
Die Ubuntu-Schriftdateien werden automatisch in das richtige Format für verschiedene Browser konvertiert. Je nach Hersteller und Version ist das erforderliche Format WOFF
, EOT
, SVG
oder TTF
. Die richtige CSS-Kombination ist spezifisch für jede Seitenanforderung und löst dieses schwierige Problem auf magische Weise.
Antwort3
Die serverseitige Schriftartdarstellung (oder vielleicht besser „dynamische Schriftartdarstellung“) ist schon seit geraumer Zeit ein interessantes Thema.
Technisch erscheint es logisch, dass eine bestimmte Schriftart auf einem Computer bereits lokal installiert sein muss, damit sie angezeigt werden kann.
Andererseits verliert das Webdesign viel, wenn es bei den grundlegenden/bekannten „Web-Schriftarten“ bleiben muss.
CSS2.1 hat einige Verbesserungen gebracht durch die Verwendung@SchriftartRegelDeklaration.
Es ist noch kein Standard, wird es aber irgendwann mit CSS3.
Daneben gibt es noch einige Alternativmethoden, wie zum Beispiel:
Ich hoffe, die bereitgestellten Links geben Ihnen eine bessere Vorstellung davon, was getan werden kann ;-)