nicht angemeldet
Fonts nachladen
0 
Matthias Apsel
0 0 0
0
Fonts nachladen
Hello,
zum Nachladen von Fonts stellt CSS die Möglichkeit
@font-face
{ font-family:fraktur bt;
src:url(http://www.example.org/fonts/frakturn.ttf);
}
Zur Verfügung.
Wie ist die Syntax, wenn man mehrere Fonts nachladen will?
Da stehe ich jetzt leider im Nebel.
Wie ich festgestellt habe, benutzen die neueren Browser (ff >= 15.x) dafür auch die Same-Origin-Policy. Die Fonts müssen also von derselben URL kommen, wie die übrige Seite. Ist das so festgelegt, oder ist das nur eine Eigenart von FF? Der alte FF (3.6.13) macht das nämlich noch nicht so.
Liebe Grüße aus dem schönen Oberharz
Tom vom Berg
-
Om nah hoo pez nyeetz, Tom!
Wie ist die Syntax, wenn man mehrere Fonts nachladen will?
Da stehe ich jetzt leider im Nebel.Da es _eine_ Schriftart ist, jeden einzeln: http://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Schriftformatierung/@font-face
Wie ich festgestellt habe, benutzen die neueren Browser (ff >= 15.x) dafür auch die Same-Origin-Policy. Die Fonts müssen also von derselben URL kommen, wie die übrige Seite. Ist das so festgelegt, oder ist das nur eine Eigenart von FF? Der alte FF (3.6.13) macht das nämlich noch nicht so.
Ist mir noch nicht aufgefallen.
Matthias
--
1/z ist kein Blatt Papier.
-
Hello Tom!
Wie ist die Syntax, wenn man mehrere Fonts nachladen will?
Da stehe ich jetzt leider im Nebel.Ich glaube, das hat Matthias ja schon beantwortet. Ansonsten gilt es aber trotzdem noch einige "Fallstricke" zu beachten ...!
Siehe u.a. http://css-tricks.com/snippets/css/using-font-face/.
Auch der @font-face Generator von Font Squirrel ist ganz hilfreich (momentan offline wegen "Sandy").Wie ich festgestellt habe, benutzen die neueren Browser (ff >= 15.x) dafür auch die Same-Origin-Policy. Die Fonts müssen also von derselben URL kommen, wie die übrige Seite. Ist das so festgelegt, oder ist das nur eine Eigenart von FF? Der alte FF (3.6.13) macht das nämlich noch nicht so.
Ja, siehe https://developer.mozilla.org/en-US/docs/CSS/@font-face#Notes
Noch ein paar Anmerkungen:
@font-face ist aus Sicht des Designers natürlich eine verlockende Sache ...., aber auch mit etlichen Problemen behaftet.
Performancemäßig ein Albtraum, weil u.a. die Elemente vom Browser bereits gerendert werden, bevor die Schriftarten heruntergeladen wurden und da diese nicht gecached werden, werden sie bei jedem Aufruf erneut geladen. Abhilfe könnte hier das direkte Einbinden in die CSS-Datei (base 64 encoded) schaffen, aber meinen Tests zufolge haben zumindest einige der mobilen Browser damit so ihre Probleme.Gruß Gunther
-
Hi,
Performancemäßig ein Albtraum, weil u.a. die Elemente vom Browser bereits gerendert werden, bevor die Schriftarten heruntergeladen wurden und da diese nicht gecached werden, werden sie bei jedem Aufruf erneut geladen.
Ist das ein bekanntes Problem, das *generell* kein Caching stattfindet? Ist mir bisher noch nicht untergekommen.
MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?-
Hi,
Performancemäßig ein Albtraum, weil u.a. die Elemente vom Browser bereits gerendert werden, bevor die Schriftarten heruntergeladen wurden und da diese nicht gecached werden, werden sie bei jedem Aufruf erneut geladen.
Ist das ein bekanntes Problem, das *generell* kein Caching stattfindet? Ist mir bisher noch nicht untergekommen.
Hmmm ..., ich hatte das jedenfalls so im Hinterkopf. Ich kann aber leider die Seite nicht mehr finden, wo ich meine das gelesen zu haben.
Die generelle "Meinung" ist ja die, dass die Font-Files vom Browser (auch) gecached werden, jedenfalls wenn sie mit einem entsprechenden Header ausgeliefert werden.
Hier ist eine Beispielseite, die das demonstrieren soll. Im aktuellen Chrome (22) funktioniert das bei mir auch. Aber im ebenfalls aktuellen FF (16.0.2) nicht.
Gruß Gunther
-
Hi,
Hier ist eine Beispielseite, die das demonstrieren soll. Im aktuellen Chrome (22) funktioniert das bei mir auch. Aber im ebenfalls aktuellen FF (16.0.2) nicht.
Bei mir passiert auch im FF 16.0.2 genau das erwartete: Beim neu laden des Dokumentes über den “Cache test”-Link wird ausschließlich das Dokument selber neu geladen, die Schriftart aber nicht.
MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?-
Hi,
Bei mir passiert auch im FF 16.0.2 genau das erwartete: Beim neu laden des Dokumentes über den “Cache test”-Link wird ausschließlich das Dokument selber neu geladen, die Schriftart aber nicht.
Bei mir auch, nachdem ich den Cache wieder enabled habe ... - sorry!
Auf den diversen Mobile Versionen der verschiedenen Browser funktioniert es auf meinem Android Smartphone auch, mit Ausnahme des Mobile Chrome.
Gruß Gunther
-
-
-
-
Moin!
Siehe u.a. http://css-tricks.com/snippets/css/using-font-face/.
Auch der @font-face Generator von Font Squirrel ist ganz hilfreich (momentan offline wegen "Sandy").Trotzdem kann man sich doch nen Font @font-face Kit dass mehrere Schrifttypen enthaelt runterladen und sich das CSS mal anschauen.
--
Signaturen sind blöd!
-
-
Hello,
ich sag zwischendurch schon mal Danke für Eure Antworten. Hatte leider den ganzen Tag keine Zeit, da weiterzumachen...
Hoffentlich klappts morgen :-O
Da werden dann bestimmt doch noch Fragen kommen.Liebe Grüße
Back home im schönen Oberharz (heute mit ordentlich Schnee)Tom vom Berg