MetaModels Workshop in Berlin
Ergebnis 1 bis 2 von 2

Thema: Safari Webbrowser macht 2 Probleme bei der Darstellung

  1. #1
    Contao-Nutzer
    Registriert seit
    31.01.2016.
    Beiträge
    207

    Standard Safari Webbrowser macht 2 Probleme bei der Darstellung

    Hallo zusammen,

    ich bin gerade dabei eine Vereinshomepage auf Contao umzustellen.
    Beide Probleme habe ich nur unter Safari (egal ob MacOS, iPhone usw.), mit Microsoft Edge, Firefox, Chrome und Opera wird alles richtig dargestellt. Selbst der Firefox unter MacOS hat diese Probleme nicht, bis auf ein paar gewisse Abstände.

    Auf unserer Homepage habe ich eine h1 Überschrift auf der mittleren Spalte über die ich auf der Startseite eine Grafik *.png per z-index ziehe und überdecke, was in allen Browsern funktioniert bis auf Safari. Im Safari funktioniert zwar die Überlappung, aber die Überschrift bleibt im Vordergrund. Auf der Homepage ist Flexbox zur Gestaltung eingesetzt. Wenn ich die Flexbox-Funktion abschalte verschwindet die Überschrift wie es gewünscht ist in den Hintergrund. Hat Safari vielleicht ein Problem mit dem Zusammenspiel von z-index und Flexbox? Gibt es einen Style mit dem ich die Grafik unter Safari in den Vordergrund holen kann, ohne das Probleme mit den anderen Browsern auftreten.

    Für die Benennung von Links in der Navigation auf der linken Spalte und im Footer sowie Text im Footer habe ich einen eigenen Font in die Homepage eingebunden. Aber dieser Font wird unter Safari nicht angezeigt, bei allen anderen Browsern schon. Wenn ich diesen Font abschalte und einen Systemfont hernehme werden alle Menüpunkte und Texte angezeigt. Was kann ich tun, damit auch Safari diesen Font anzeigt? Dieser Font wird von uns in den meisten Vereinsdokumenten und -schreiben verwendet.

    Link zur Webseite: http://sub.musikverein-hirschzell.de

    Screenshot zum Problem: Screenshot_Safari_iPhone.jpg

    CSS-Code
    Code:
    @font-face {
        font-family:"DINMedium";
        font-style:normal;
        font-weight:normal;
        src:url("files/hirschzell/content/fonts/DINMedium.ttf");
    }
    
    .mod_navigation.main_nav .level_1 a,
    .mod_navigation.main_nav .level_1 spam {
        font:1.4em "DINMedium",sans-serif;
        padding:0 0 3px 3px;
    }
    Kann mir bitte jemand dazu einen entsprechenden Tipp geben oder mitteilen wo hierzu Informationen zu finden sind.
    Danke!


    Gruß
    Thomas

  2. #2
    Administratorin Avatar von lucina
    Registriert seit
    19.06.2009.
    Ort
    Kiel (DE)
    Beiträge
    6.408
    Partner-ID
    152
    User beschenken
    Wunschliste

    Standard

    Ein Truetype-Font ist einfach keine gute Idee. Und wenn Du ihn benutzen möchtest, dann solltest Du ihn auch mit @font... laden.

    Woff2 (und als Fallback *.woff) ist das was man möchte.

    Zum Lesen: https://alistapart.com/article/using-webfonts/

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •