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

Question

我刚刚启动了一个我正在进行的项目以进行一些修改，并注意到font-weight: lighter正在通过该声明提供服务@font-face并且它不再在该站点上工作（参见图片 - 顶部 chrome，底部 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

如果您正在使用具有多种样式的字体字体（您应该这样做），请确保每个变体都专门与字体粗细相关联，这样每个变体都有自己的显式文件。否则，它有点取决于浏览器来弥补它想要做的事情。我发现从 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;

}