Jump to content

Webfont: Falsche Darstellung der Schriftstärke in Chrome


tobinsky

Empfohlene Beiträge

tobinsky

Hallo zusammen,

 

ich habe ein sehr merkwürdiges Problem, für das ich einfach keine Lösung finden will. Eine statische (Landing-)Page soll mit einem Webfont versehen werden, der lokal eingebunden wird (Dateien auf dem Server, @font-face) und in zwei Varianten vorliegt - regular und medium.

Da für beide Schriftstärken separate Fonts vorliegen, habe ich darauf geachtet, dass bei der Einbindung via @font-face in beiden Fällen " font-weight: normal; font-style: normal;" definiert wurde, ebenso bei der Definition der beiden Klassen in CSS.

 

Damit soll bspw. faux bold etc. vermieden werden, siehe https://www.smashingmagazine.com/2012/07/avoiding-faux-weights-styles-google-web-fonts/ 

 

Das funktioniert auch grundsätzlich, in Firefox und Safari wird die Medium-Variante (erster Satz) korrekt dargestellt, in Chrome hingegen ignoriert: 

 

Wenn ich bspw. mit der Chrome-Erweiterung WhatFont prüfe, wird hier auch die Medium-Variante der Schrift erkannt im ersten Satz, nur ist das eben nicht sichtbar...

Wenn ich nun versuchsweise via CSS "font-weight: bold" setze, ist das Ergebnis natürlich in sämtlichen Browsern nicht mehr korrekt, da "künstlich" verfettet wird. 

Hat jemand ähnliche Erfahrungen gemacht oder eine Idee, woran dies liegen könnte?

 

 

edit:

Anfangs hatte ich das Problem, dass alle Browser die Schriften unsauber darstellten, das lag an der Verwendung von vw-Angaben für font-size. Testweise ist dies nun auf px umgestellt, das Ergebnis (FF/Safari korrekt, Chrome falsch) ist das hier präsentierte.

2018-03-16_1024.png

bearbeitet von tobinsky
Nachtrag
Link zum Beitrag
tobinsky

Ich will mich nicht strikt nach diesem Artikel richten, nur ist das Problem ja noch immer aktuell, oder etwa nicht?

Denn sobald ich mit font-weight: medium experimentiere, wird eben künstlich verfettet anstatt die korrekte medium-Schrift zu verwenden. Zumindest Firefox und Safari scheinen diesen Ansatz zu bestätigen. Sollte ich mich da aber auf dem Holzweg befinden, bin ich für Aufklärung äußerst dankbar!

Link zum Beitrag
Ralf Herrmann

Wenn es definitiv bei zwei Strichstärken bleibt, sprich sie als normal und bold an und es gibt in keinem aktuellen Browser Probleme. Diese Unterscheidung ist ja der kleinste gemeinsame Nenner, den es seit den 1990ern gibt. 

Link zum Beitrag
tobinsky

Das war mein erster Gedanke, allerdings funktioniert das leider nicht: 

2018-03-16_1202


Die einzige korrekte Anzeige (in FF & Safari) findet sich rechts oben, die Medium-Schrift wird eingebunden mit font-weight: normal, da ja diese Schriftvariante schon etwas dicker ist als die Regular-Version. Die Bold-Einbindung rechts unten ist schlicht fetter als die NeusaNextStd-CondensedMedium.

Link zum Beitrag
tobinsky

Ich habe die in zwei Familien definiert:

 

@font-face {font-family: 'NeusaNextStd-CondensedMedium';src: url('webfonts/NeusaNextStd-CondensedMedium.eot');src: url('webfonts/NeusaNextStd-CondensedMedium.eot?#iefix') format('embedded-opentype'),url('webfonts/NeusaNextStd-CondensedMedium.woff2') format('woff2'),url('webfonts/NeusaNextStd-CondensedMedium.woff') format('woff'),url('webfonts/NeusaNextStd-CondensedMedium.ttf') format('truetype'); font-weight: normal; font-style: normal;}
   
@font-face {font-family: 'NeusaNextStd-CondensedRegular';src: url('webfonts/NeusaNextStd-CondensedRegular.eot');src: url('webfonts/NeusaNextStd-CondensedRegular.eot?#iefix') format('embedded-opentype'),url('webfonts/NeusaNextStd-CondensedRegular.woff2') format('woff2'),url('webfonts/NeusaNextStd-CondensedRegular.woff') format('woff'),url('webfonts/NeusaNextStd-CondensedRegular.ttf') format('truetype'); font-weight: normal; font-style: normal;}

 

Liegt hier mein Denkfehler? Allerdings scheint es ja grundsätzlich bzw. in manchen Browsern zu funktionieren...

Link zum Beitrag
Ralf Herrmann
vor 14 Minuten schrieb tobinsky:

Liegt hier mein Denkfehler? 

Ja. Es muss eine Familie sein, damit Familienzugehörigkeiten überhaupt einen Sinn ergeben. Wenn es dann eine Familie ist, ist wie gesagt die Zuweisung normal + bold die sicherste. 

Link zum Beitrag
  • 2 Jahre später...
ErikaRojas

Hallo Leute,

 

ich habe dasselbe Problem, wenn ich html schreibe <strong class "N" > und in CSS .N : font-weight: normal, dann funktioniert das in Firefox, aber nicht in Chrome. Das Problem existiert aber nur, wenn ich es im online-editor von one.com schreibe. Im offline editor bracket funktioniert es auch in chrome. Gibt es da irgendeine Lösung? Meine Internetadress ist erikarojas.de

Link zum Beitrag

Diskutiere mit …

Du kannst jetzt schreiben und dich später registrieren. Wenn du bereits einen Account hast, melde dich an, um von deinem Account aus zu schreiben.
Hinweis: Dein Beitrag muss von einem Moderator zunächst freigeschaltet werden.

Gast
Auf dieses Thema antworten ...

×   Du hast formatierten Text eingefügt.   Restore formatting

  Only 75 emoji are allowed.

×   Dein Link wurde automatisch eingebettet.   Einbetten rückgängig machen und als Link darstellen

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Neu erstellen...

Hinweis

Wie die meisten Websites, legt auch Typografie.info Cookies im Browser ab, um die Bedienung der Seite zu verbessern. Sie können die Cookie-Einstellungen des Browsers anpassen. Anderenfalls akzeptieren Sie bitte die Speicherung von Cookies. Weitere Details in der Datenschutzerklärung