Chrome 19 无法识别字体粗细：较轻

Question

我刚刚提取了一个我正在进行的项目以进行一些修改，并注意到声明 font-weight: lighter 正在通过 @font-face 提供服务，并且它不再在网站上工作（参见图片 - 顶部铬，底部ff）。自昨晚以来，我的系统 (Windows) 上没有任何变化，今天 bar 升级到 Chrome 19.0.1084.46，我认为这是问题所在，但我想知道是否有其他人注意到这一点或是否有修复？

谢谢。

Answer 1

尝试使用数字而不是相对术语lighter。

例如：font-weight:100 将是最轻的。

这里有一篇关于相对和绝对字体粗细的文章： http://webdesign.about.com/od/fonts/qt/aa031807.htm

Answer 2

如果您使用具有多种样式的字体字体（如您should），请确保每个变体都专门绑定到字体粗细，这样每个变体都有自己的显式文件。否则，它有点取决于浏览器来弥补它想要做的事情。我发现从 font-squirrel 自动生成的代码并没有这样做（尽管他们可能已经更新了他们正在打包）

请注意以下代码中的每个文件如何明确设置字体粗细和字体样式。这样就没有猜测的余地了。

@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;

}