Chrome 19 ne reconnaissant pas le poids de la police: plus léger

Question

Je viens de faire un projet sur lequel je travaille pour apporter quelques modifications, et j'ai remarqué que la déclaration font-weight: lighter est en cours de traitement via @font-face et ne fonctionne plus sur le site (voir image - dessus chrome, bas ff). Rien n'a changé sur mon système (Windows) depuis la nuit dernière, la barre étant mise à niveau vers Chrome 19.0.1084.46 aujourd'hui, ce qui je suppose est le problème, mais je me demande si quelqu'un d'autre a remarqué cela ou s'il y a une solution?

Merci.

Answer 1

Essayez d'utiliser un nombre plutôt que le terme relatif lighter. Par exemple, font-weight:100 sera la plus légère.

Il y a un article pratique concernant les polices-poids relatifs et absolus ici: http://webdesign.about.com/od/fonts/qt/aa031807.htm

Answer 2

Si vous utilisez une police font-face qui a plusieurs styles (comme vous should) assurez-vous que chaque variante est spécifiquement liée à un poids de police, de cette façon chaque variation a son propre fichier explicite. Sinon, il appartient au navigateur de faire ce qu'il veut. J'ai trouvé que le code généré automatiquement à partir de font-squirrel ne fait pas cela (bien qu'ils aient peut-être mis à jour ils empaquetent)

Notez dans le code suivant comment chaque fichier a le type de police et le style de police définis explicitement . Cela ne laisse aucune place pour deviner.

@font-face { 
    font-family: 'CaviarDreams'; 
    src: url('fonts/CaviarDreamsItalic-webfont.eot'); 
    src: url('fonts/CaviarDreamsItalic-webfont.eot?#iefix') format('embedded-opentype'), 
     url('fonts/CaviarDreamsItalic-webfont.woff') format('woff'), 
     url('fonts/CaviarDreamsItalic-webfont.ttf') format('truetype'), 
     url('fonts/CaviarDreamsItalic-webfont.svg#CaviarDreamsItalic') format('svg'); 
    font-weight: normal; 
    font-style: italic; 

} 

@font-face { 
    font-family: 'CaviarDreams'; 
    src: url('fonts/CaviarDreams_BoldItalic-webfont.eot'); 
    src: url('fonts/CaviarDreams_BoldItalic-webfont.eot?#iefix') format('embedded-opentype'), 
     url('fonts/CaviarDreams_BoldItalic-webfont.woff') format('woff'), 
     url('fonts/CaviarDreams_BoldItalic-webfont.ttf') format('truetype'), 
     url('fonts/CaviarDreams_BoldItalic-webfont.svg#CaviarDreamsBoldItalic') format('svg'); 
    font-weight: bold; 
    font-style: italic; 

} 

@font-face { 
    font-family: 'CaviarDreams'; 
    src: url('fonts/CaviarDreams-webfont.eot'); 
    src: url('fonts/CaviarDreams-webfont.eot?#iefix') format('embedded-opentype'), 
     url('fonts/CaviarDreams-webfont.woff') format('woff'), 
     url('fonts/CaviarDreams-webfont.ttf') format('truetype'), 
     url('fonts/CaviarDreams-webfont.svg#CaviarDreamsRegular') format('svg'); 
    font-weight: normal; 
    font-style: normal; 

} 

@font-face { 
    font-family: 'CaviarDreams'; 
    src: url('fonts/CaviarDreams_Bold-webfont.eot'); 
    src: url('fonts/CaviarDreams_Bold-webfont.eot?#iefix') format('embedded-opentype'), 
     url('fonts/CaviarDreams_Bold-webfont.woff') format('woff'), 
     url('fonts/CaviarDreams_Bold-webfont.ttf') format('truetype'), 
     url('fonts/CaviarDreams_Bold-webfont.svg#CaviarDreamsBold') format('svg'); 
    font-weight: bold; 
    font-style: normal; 

}