Hallo zusammen,
ich soll die Schriftart DIN-Medium für die Menüpunkte der Navigation auf unserer Homepage zuweisen. Diese Schriftart habe ich als Woff und Woff2 lokal in Contao gespeichert und per CSS eingebunden. Die genannte Schriftart wird vereinsintern bei den meisten Dokumenten verwendet. Jetzt macht aber mir genau diese Schriftart Probleme bei der Darstellung. Webseite ist unter http://sub.musikverein-hirschzell.de zu sehen.
Alle Menüpunkte der Navigation haben eine feste Höhe von 26px, einen Rahmen von 1px an allen 4 Seiten und eine Schriftgröße von 1.4em. Unter Windows wird mit allen gängigen Browswern ein oberer Abstand von 6px und ein unterer Abstand von 2px eingefügt, ohne diesen explizite im Sylesheet angegeben zu haben. Bei Apple Geräten egal ob MAC oder IOS wird ein oberer Abstand von -1px (Schrift reicht in Rahmen hinein) und ein unterer Abstand von 8px eingefügt. Dabei spielt es keine Rolle, ob der Safari Browser oder ein anderer Browser wie Firefox usw. verwendet wird. Zum Test habe ich weitere Schriftarten wie z.B. Sans-Serif, Verdana, Google Droid Sans und andere ausprobiert und bei allen war unter Windows und Apple der obere und untere Abstand identisch. Nehme ich die 2. Schriftart welche im Woff- und Woff2 Format vorliegt her, dann sind auch hier die Abstände unter Windows und Apple identisch.
Gibt es irgendeine Möglichkeit, mit der man nur speziell Apple-Geräten einen Style zuweisen kann oder eine entsprechende andere Lösung um an mein Ziel zu kommen?
Code:
@font-face {
font-family:DIN-Medium;
src:url("files/hirschzell/content/fonts/DIN-Medium.ttf"),
url("files/hirschzell/content/fonts/DIN-Medium.woff2");
url("files/hirschzell/content/fonts/DIN-Medium.woff");
}
mod_navigation.main_nav .level_1 span {
font-family:DIN-Medium, sans-serif;
font-size:1.4em;
font-weight:normal;
}
Danke!
Gruß
Thomas
Lesezeichen