2017-03-06 6 views
0

Vor dem Posten habe ich gesucht und erfolglos verschiedene Lösungen getestet. Chrome rendert überhaupt nicht die korrekten Gewichte für die montserrat-Familie, ich habe verschiedene Lösungen versucht, wie die Option "clear type" in win 10 aktivieren/deaktivieren, aber nicht von ihnen funktioniert. Wie auch immer, ich möchte dieses Problem nicht lösen, indem ich meine Einstellungen ändere. Aufbau. Alles ist korrekt in Edge und Firefox.Google Schrift Montserrat in Chrom kein Rendering Licht Schrift-Gewicht

Irgendwelche Ideen, warum das passiert?

Ich importieren die Schriftart als:

@import url('https://fonts.googleapis.com/css?family=Montserrat:100,300,400,700,900'); /** font-family: 'Montserrat', sans-serif; **/ 

und dessen Verwendung als:

p { 
    font-family: 'Montserrat', sans-serif; 
    font-size: 16px; 
    font-weight: 100; /** 300 didnt work either **/ 
} 

Antwort

6

The problems with font-weight and web fonts are known but sadly still not fixed.

Chrome hat noch einige Probleme mit Web-Fonts und ihre Gewichte.

Sie haben wahrscheinlich die Schriftart lokal installiert und Chrome lädt sie zuerst, anstatt die Webschriftart zu verwenden. Eine mögliche Problemumgehung ist das Löschen der Schriftart aus Ihrem lokalen Verzeichnis, aber selbst wenn das funktioniert, kann eine andere Person mit lokal installiertem Montserrat die gleichen Probleme mit Ihrer Website haben.

Optimalere Problemumgehung ist das Herunterladen der Schriftart und das Laden jedes Gewichts als eine andere Schriftart. eine lokale Schriftart in CSS Laden wird mit der Definition es font-face Trog @ getan, die dann als unterschiedliche Schriftarten, die Sie verwenden, wie dies

@font-face { 
    font-family: 'MontserratLight'; 
    font-weight: normal; 
    src: url('montserrat_light.eot'); 
    src: url('montserrat_light.eot?#iefix') format('embedded-opentype'), 
     url('montserrat_light.woff2') format('woff2'), 
     url('montserrat_light.woff') format('woff'), 
     url('montserrat_light.ttf') format('truetype'), 
} 

@font-face { 
    font-family: 'MontserratRegular'; 
    font-weight: normal; 
    src: url('montserrat_regular.eot'); 
    src: url('montserrat_regular.eot?#iefix') format('embedded-opentype'), 
     url('montserrat_regular.woff2') format('woff2'), 
     url('montserrat_regular.woff') format('woff'), 
     url('montserrat_regular.ttf') format('truetype'), 
} 

verwendet wird.

Beispiel

p { 
    font-family: 'MontserratLight', sans-serif; 
    font-size: 16px; 
} 

Sie mehr über @ font-face https://css-tricks.com/snippets/css/using-font-face/

+1

Große Antwort hier lesen können, gelöst nicht nur das Problem, auch dazu beigetragen, das Problem zu verstehen, dank dank dank –