Fraktur im Internet mit @font-face (CSS)

Es müſſen ja nicht unbedingt Computer-Schriftarten ſein

Fraktur im Internet mit @font-face (CSS)

Beitragvon mach » 2010-08-28, 18:19

Fraktur kann heut‌zutage im Internet verwendet werden, und zwar indem ſie über die CSS-Anweiſung „@font-face“ eingebettet wird (font embedding). Viele moderne Browſer ſind mittlerweile dazu in der Lage (Firefox ≥ 3.5, Opera ≥ 9.7, Safari ≥ 3.0, Chrome ≥ 4.0, Internet Explorer ≥ 4.0). Dazu brauchte es a) eine geeignete Schriftart und b) den richtigen CSS-Code.


a) Geeignete Schriftarten

Eine geeignete Schriftart muſs drei Bedingungen erfüllen:

  1. Freie Lizenz: Einbettung im Internet oder uneingeſchränkte Weitergabe muſs erlaubt ſein (denn Einbettung im Internet iſt uneingeſchränkte Weitergabe).
  2. Geeignete Schriftart-Formate: Für die gängigen Browſer muſs die Schriftart in den Formaten TTF und EOT (für den Internet Explorer) vorliegen. Darüber hinaus iſt das vom W3C empfohlene Format WOFF nützlich, da es komprimiert iſt, ſowie SVG für das iPhone. Notfalls laſſen ſich die verſchiedenen Formate alle aus einer TTF-Datei erſtellen, vorausgeſetzt, die Lizenz der Schriftart erlaubt eine Bearbeitung.
  3. Standardkonformität: Die Schriftart darf nur ſtandardiſierte Unicode-Zeichen verwenden. Es läſſt ſich nicht garantieren, daſs die Einbettung der Schriftart über @font-face funktioniert. Es gibt zahlreiche legitime Gründe (abgeſehen von mangelhaften Browſern oder Serverproblemen), warum die Einbettung nicht funktionieren könnte, etwa ſelbſtgewähltes CSS, Sicherheitsbedenken, Quelltextbetrachtung, Copy-Paſting, Google-Bots u. v. a. m. Der Text muſs auch dann lesbar bleiben, wenn die Einbettung nicht funktioniert. Das läſſt ſich nur dadurch erreichen, daſs ausſchließlich ſtandardiſierte Unicode-Zeichen verwendet werden.

    Alſo ſind jegliche Schriften ungeeignet, wo Ligaturen mit den per definitionem nicht-ſtandardiſierten Zeichen aus der Private Use Area von Unicode (PUA) dargeſtellt werden. Ligaturen müſſen über OpenType dargeſtellt werden, weil im Text nur ſtandardiſierte Unicode-Zeichen verwendet werden dürfen. Insbeſondere ſind die UNZ-1-Ligaturen nicht geeignet fürs Internet (es handelt ſich um einen kleinen Teilbereich des MUFI-Vorſchlags, der für Frakturſchriften relevant iſt). Die Verwendung derartiger Ligaturen aus der PUA führt zu unleſerlichen Texten, wenn die Einbettung der Schriftart nicht funktioniert. Ein Beiſpiel: Wenn der Text „nicht-ſtandardiſierter Frakturſchriftſatz“ mit den PUA-Ligaturen gemäß UNZ-1 geſchrieben wird, dann ſieht er ohne Einbettung der Schriftart folgendermaßen aus: „nit-ſtandardierter Frakturriſa“.

Schriften, die dieſe drei Vorausſetzungen erfüllen, ſind:

Ich bin dankbar um jeden Hinweis auf weitere fürs Internet geeignete Schriftarten!


b) CSS-Code

Hier Beiſpiel-CSS für eine Einbettung von Unifraktur Maguntia – vorausgeſetzt iſt, daſs die Dateien UnifrakturMaguntia.eot, UnifrakturMaguntia.woff, UnifrakturMaguntia.ttf und UnifrakturMaguntia.svg ſich im gleichen Ordner befinden wie dieſe CSS-Anweiſung:

Code: Alles auswählen
@font-face { font-family:Fraktur; src:url("UnifrakturMaguntia.eot"); }

@font-face {
  font-family:Fraktur;
  src: local("Unifraktur Maguntia"),
  url("UnifrakturMaguntia.woff"),
  url("UnifrakturMaguntia.ttf"),
  url("UnifrakturMaguntia.svg#UnifrakturMaguntia");
}

* {  font-family: Fraktur; }
--
grüess
mach
--
Projekte: Entiumgay, Unifraktur, Free Tengwar Font Project, U. S. custom keyboard layout
Experimentelles Extra: Tengwar-Blog
Benutzeravatar
mach
Site Admin
 
Beiträge: 331
Regiſtriert: 2010-07-16, 12:32
Wohnort: Üechtland

Re: Fraktur im Internet mit @font-face (CSS)

Beitragvon mach » 2011-04-10, 09:55

Seit die Unifraktur-Schriftarten von Google bereitgeſtellt werden, iſt das Einbetten per @font-face bedeutend einfacher geworden.

Man fügt einfach die folgende Zeile am Anfang (bzw. vor jeglicher CSS-Schriftdefinition) des <head>-Tags in der HTML-Datei ein:

Code: Alles auswählen
<link href='http://fonts.googleapis.com/css?family=UnifrakturMaguntia|UnifrakturCook:bold' rel='stylesheet' type='text/css' />


Alternativ läſſt ſich die Einbettung auch ohne einen Eingriff in die HTML-Datei zu verändern, indem man folgende Zeile am Anfang (bzw. vor jeglicher Schriftdefinition) der CSS-Datei einfügt:

Code: Alles auswählen
@import url("http://fonts.googleapis.com/css?family=UnifrakturMaguntia|UnifrakturCook:bold");

Eine dritte Methode funktioniert per JavaScript über den WebFont Loader – Google Font API – Google Code.


Sobald man die Schriftarten alſo eingefügt hat (egal mit welcher der drei Methoden), laſſen ſie ſich in CSS-Definitionen ganz gewöhnlich verwenden, z.B. ſo:

Code: Alles auswählen
body {
  font-family: UnifrakturMaguntia;
}
h1, h2, h3 {
  font-family: UnifrakturCook;
}


Oder ſo:

Code: Alles auswählen
<h1 style="font-family: UnifrakturCook">Überſchrift</h1>
<p style="font-family: UnifrakturMaguntia">Text</p>
--
grüess
mach
--
Projekte: Entiumgay, Unifraktur, Free Tengwar Font Project, U. S. custom keyboard layout
Experimentelles Extra: Tengwar-Blog
Benutzeravatar
mach
Site Admin
 
Beiträge: 331
Regiſtriert: 2010-07-16, 12:32
Wohnort: Üechtland


Zurück zu Sonſtiges

cron