Jump to content
Jetzt die beliebtesten Neuveröffentlichungen bei MyFonts entdecken …

Webfont: Falsche Darstellung der Schriftstärke in Chrome

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 zu diesem Kommentar
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 zu diesem Kommentar

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 zu diesem Kommentar
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 zu diesem Kommentar
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 zu diesem Kommentar
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 zu diesem Kommentar
  • 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 zu diesem Kommentar

Erstelle ein Benutzerkonto oder melde dich an, um zu kommentieren

Du musst ein Benutzerkonto haben, um einen Kommentar verfassen zu können

Benutzerkonto erstellen

Neues Benutzerkonto für unsere Community erstellen. Es ist einfach!

Neues Benutzerkonto erstellen

Einloggen

Du hast bereits ein Benutzerkonto? Melde dich hier an.

Jetzt anmelden

Unsere Partner

Hier beginnt deine kreative Reise.
Mit über 130.000 Fonts der größte Schriften-Shop im Internet.
Great Design Assets Just Got Affordable
Curated Quality Fonts from I Love Typography
FDI Type Foundry besuchen
Schriftlizenzierung, einfach gemacht.
Graublau Slab Pro: Die ausdrucksstarke Ergänzung zur beliebten Graublau Sans.
×
×
  • Neu erstellen...

🍪 Hinweis:

Wir benutzen funktionale Cookies.