Wieso wird die H1 so unterschiedlich zwischen Safari und Firefox interpretiert?

[dtptiger]

Hallo,

der Name "Kalender für Tango Argentino für Nordbayern" wird von Firefox und Safari/Chrome extrem unterschiedlich interpretiert.

https://www.tango-nordbayern.de

Ich bin ja kein wirklicher css DAU mehr, so hatte ich jedenfalls von mir Erwartet, aber bei diesem CSS Problem weis ich mir nicht mehr zu Helfen.

Deswegen frage ich jetzt, obwohls ja kein Contao-Problem ist, ob das jemand versteht.
Mea Culpa

Safari_Firefox.png

Das ist der CSS Code:

#logoname h1 {
    font:43px 'Bellefair',serif;;
    font-variant:small-caps;
    letter-spacing:.03rem;
    word-spacing:0px;
}

Grüße
dtptiger
mit besten Wünschen zum morgigen Rutsch nach 18

[07alex07]

Ich erhalte beim Laden der Schriftart einen 400-Error bei dir auf der Seite

[planepix]

Vermutlich gibt es Leerzeichen zwischen den beiden Fonts im Eingabefeld?

SchriftA|SchriftB sollte es sein.

[dtptiger]

Ja!!!

Zwischen dem Schriftnamen und der pipe war ein Leerzeichen!

Jetzt schaut alles anders aus hu

Vielen dank für die schnelle Hilfe :-)
Gruß dtptiger

[dtptiger]

Hallo,

jetzt wirft die Schrift keine Fehler mehr aus, doch die Schriftgröße 43px "Kalender für Tango Argentino für Nordbayern" wird von Firefox und Safari/Chrome noch immer sehr unterschiedlich interpretiert.
Nur diese Überschrift, alles anderen sind identisch auf beiden engines.

https://www.tango-nordbayern.de

Was kann das sein????

Grüße
dtptiger

[planepix]

Ja ich habe es mir auch noch mal angesehen.

Unter Mac OS rendert Firefox Schriften tendenziell fetter und ggf. auch größer. Das kann jetzt auch von der Schrift speziell stammen.

Erster Lösungsansatz: Die body-Klasse für den Firefox nutzen und die Headline kleiner setzen.

body.firefox #logoname h1 { font-size:36px;}

Weiterer Ansatz: Einsatz von font-size-adjust -> http://www.peterkroener.de/schoenes-...t-size-adjust/
Kann laut Caniuse nur der Firefox -> https://caniuse.com/#search=font-size-adjust

Gibt es noch Tipps oder Hinweise auf der Seite des Schriftanbieters?
Ok ist ein Google-Font.

[dtptiger]

Hallo Planetix,
das Essen ruft jetzt, werde mich später darum kümmern.
LG dtptiger

[mlweb]

Ich denke die Ursache ist font-variant: small-caps.
Du nutzt ja keine echten Kapitälchen, sondern das wird vom Browser simuliert. Das machen die Browser leider unterschiedlich.
https://q-a-assistant.com/computer-i...r-firefox.html

[dtptiger]

Guten Abend,

die Firefox body-Klasse war eine sehr gute Idee für einen workaround!

Ich denke die Ursache ist font-variant: small-caps.
Du nutzt ja keine echten Kapitälchen, sondern das wird vom Browser simuliert. Das machen die Browser leider unterschiedlich.

Ja, das sind bestimmt grössere Unterschiede je Browserengine als wenn der Browser nichts faken muss, doch soooo groß sind die Unterschiede doch nicht.
Die anderen Überschriften unterscheiden sich nicht so wesentlich, bilde ich mir jedenfalls zu dieser Uhrzeit ein

Danke für eure superschnelle Hilfe!

Grüße
dtptiger

[dtptiger]

Das ist jetzt das zuständige CSS

#logoname h1 {
font:48px/48px 'Bellefair',serif;;
font-variant:small-caps;
letter-spacing:.03rem;
word-spacing:0px;
}

body.firefox #logoname h1 {
font-size:56px;
line-height:46px;
}

Aber irgendwie ist da was nicht koscher, das CSS ist immer mehr gewachsen und etwas "in die Jahre gekommen", braucht mal eine Versäuberung. Wenn ich mal viel Zeit hab :-)

[tab]

Kann sicher auch nicht schaden, HTML und CSS valide zu machen wenn die Seite in verschiedenen Browsern unterschiedlich dargestellt wird. Browser reagieren auf Fehler in CSS oder HTML oft unterschiedlich.