Schlagwort css

Ein kleiner Tip: Manche Mobilbrowser (Beispiel: Der Standard- Systembrowser auf dem Samsung Galaxy Tab 10.1) haben Probleme mit relativ (zur Position des Stylesheet) verlinkten Font-Dateien.

Die Browser sind anscheinend nicht in der Lage, die Font-Dateien zu finden und weichen bei der Darstellung auf den definierten Fallback bzw. Systemfonts aus, was in manchen Layouts nicht so nett ausschauen dürfte ;-)

Beispiel: Die Verzeichnisstruktur einer kleinen Seite schaut folgendermaßen aus:

/
/index.html
/css/style.css
/css/fonts/coolfont.eot
/css/fonts/coolfont.woff
/css/fonts/coolfont.ttf
/css/fonts/coolfont.svg

Wir binden die Schriftart in der style.css mit CSS-Konformen Pfaden ein (relativ zum CSS-File), Überschriften der Kategorie 1 sollen in Coolfont dargestellt werden – Als Fallback-Schriftfamilien haben wir arial und sans-serif definiert.

@font-face {
  font-family: 'CoolFont';
  src: url('fonts/coolfont.eot?#iefix') format('eot'),
       url('fonts/coolfont.woff') format('woff'),
       url('fonts/coolfont.ttf')  format('truetype'),
       url('fonts/coolfont.svg#NewcastleBold') format('svg');
}

h1 { font-family: CoolFont, arial, sans-serif; }

Ergebnis: Desktopbrowser stellen die Schriftart korrekt an – der Browser auf meinem Galaxy Tab stellt die Überschriften in arial an.

Gibt man stattdessen absolute Pfade vom DocumentRoot der Seite aus gesehen an, funktioniert es:

@font-face {
  font-family: 'CoolFont';
  src: url('/css/fonts/coolfont.eot?#iefix') format('eot'),
       url('/css/fonts/coolfont.woff') format('woff'),
       url('/css/fonts/coolfont.ttf')  format('truetype'),
       url('/css/fonts/coolfont.svg#NewcastleBold') format('svg');
}

Hope this helps: enjoy!

In Ergänzung zu meinem letzten Artikels bzgl. IE Conditional Comments und deren listiger Nutzung finde ich folgende Verfeinerung sehr sinnvoll:

Manchmal benötige ich zusätzlich zur Identifizierung des Internet Explorers noch die Version, um den Stylesheet noch feiner kontrollieren zu können. Das lößt man am besten folgendermaßen:

Mehr lesen …

Auf bueltge.de hat Frank schön zusammengefasst, wie man conditional comments nutzen kann, um zusätzliche Stylesheets einzubinden, die nur der IE interpretiert. Zusätzlich zeigt er noch Wege mittels PHP und JavaScript auf, um solch eine Browserweiche umzusetzen.

Mich interessierte nun aber nur der Part mit den Conditional Comments, da es meiner Meinung nach eine weitere sehr listige Verwendungsweise dafür gibt.

Mehr lesen …