Wir hatten gerade einen Auftrag bei dem der Kunde bei der Navigation und den Überschriften die "Impact" einsetzen wollte. Eigentlich ja gar kein Problem, dachte ich, weil die Schrift ja auf Mac und PC vorhanden ist. Als ich das ganze dann bei browsershots.org überprüft habe musste ich leider feststellen das die Schrift keineswegs auf allen Systemen vorhanden ist. Auf Linux Rechnern zum Beispiel fehlt diese wohl.Gut man kann ja auch einfach im CSS eine alternative Schrift angeben die dann Verwendung findet wenn die erste nicht installiert ist. Bei der Impact allerdings war das Problem, daß diese sehr schmal läuft und bei einer "sans serif" z.B. die Navigation nicht mehr wie geplant in einer Zeile läuft sondern umbricht.Also "Impact" nicht vorhanden = Layout kaputt.
Die einzige Lösung die mir einfiel ist Javascript bzw. Jquery.
So habe ich erstmal die Schriftgrößen im Css so verkleinert das diese das Layout nicht zerstören.
Dann frage ich mit einem kleinem script ab ob die Impact vorhanden ist. Das Script gibts es hier: jquery.font.mini.js
if ($.font.test("'Impact'"): gibt ein "True" oder "False" aus.
Und mit Folgendem Script ändere ich dann noch die Schriftgröße für die Impact.
$(document).ready(function () {
if ($.font.test("'Impact'")) {
$('.front, #topNavi ul.links li a').css('font-family', 'Impact');
$('#topNavi ul.links li a').css('font-size', 28);
$('#premiere h2').css('font-size', 36);
$('#block-block-1').css('font-size', 16);
$('#logo h1 .logo_elf').css('font-size', 330);
$('#logo h1 .logo_onkel').css('font-size', 160);
}
});
So kann man eigentlich alles Mögliche ändern. Das doofe ist nur, man muss die CSS Angaben ein bisschen anders Schreiben als gewohnt. Die Farbe zu ändern würde so gehen: $(this).css("color","black");
Wenn jemand ne bessere Lösung weis kann es gerne einen Kommentar hinterlassen.
<Klasse>
<Klasse>
Post new comment