Schriftgröße und Browserweiche


Problem:

  • Von den Browser Einstellungen unabhängige Schriftgröße, welche im IE und Netscape in etwa gleich groß angezeigt wird

Problemlösung:

  • Style Sheet Größenangabe in Pixeln

  • für jeden Browser eine andere Größenangabe in einer externen Style Sheet Datei

  • Browsererkennung mittels Javascript und Referenzierung auf die zugehörige Style Sheet Datei

Für dieses Thema sind einige Grundkenntnisse in Javascript von Vorteil.

Hier wurde ein Style Sheet für Netscape und ein Style Sheet für Internet Explorer definiert. Mittles Javascript wird der Browser erkannt und dann auf die entsprechende ausgelagerte Style Sheet Datei verwiesen. Die beiden ausgelagerten Style Sheet Dateien heißen netstyle.css und iestyle.css
Dort wurde ein Style Sheet für den body tag und definiert (in Netscape 4 gibts da jedoch noch ein Problem). Hier wurde eine Schriftart sowie eine Größenangabe in Pixel zugewiesen. Die Größenangabe in Pixeln ist in den beiden Style Sheet Dateien unterschiedlich, denn im IE sind die Pixel anscheinend größer als im Netscape. Da ich aber in beiden Browser die gleiche Schriftgröße erreichen will (egal welche Browsereinstellung und welcher Browser), ist die hier vorgestellte Methode die einzige Möglichkeit, das zu erreichen. Es folgen die Style Sheet Definitionen der beiden Dateien

Netscape
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
}

Internet Explorer
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}


Weiter gehts mit dem Javascript.
In meinem Javascript Tutorial wird unter dem Begriff "Browsertest" eine Browserweiche erklärt. Diese habe ich hier angewendet. Im Head wird mit einer If else Abfrage für den jeweiligen Browser mittels document.write die entsprechende Referenz auf die Style Sheet Datei erstellt. Das Ganze sieht dann so aus:

<head>
<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
<!--
var browser;
browser=navigator.appName;

if (browser=="Netscape") {
document.write("<link rel='stylesheet' href='netstyle.css' type='text/css'>")
}
if (browser=="Microsoft Internet Explorer") {
document.write("<link rel='stylesheet' href='iestyle.css' type='text/css'>")
}
// -->
</SCRIPT>
</head>

Man bedenke, dass in dem Verweis auf die ausgelagerte Style Sheet Datei die Anführungszeichen durch einfache Anführungszeichen ersetzt wurden. Näheres zur If Bedingung und document.write findet man in meinem Javascript Tutorial.


Abschließend will ich noch zu Bedenken geben, dass die Schriftgrößen Einstellungen der Browser extra für die Menschen gemacht wurden, die nicht so gut sehen können. Allerdings gibt es Seiten, die so speziell für bestimmte Zielgruppen gedacht sind, dass in bestimmten Fällen die hier vorgestellte Lösung durchaus angebracht ist.


zurück

Copyright ©
Ein weiterer Web Design Tip von Pastor Pixel

H T T P : / / W W W . P A S T O R P I X E L . D E