Chrome 19无法识别字体重量：更轻

Question

我刚刚启动了一个项目，我正在努力进行一些修改，并注意到通过font-weight: lighter提供的声明@font-face并且它已不再在该网站上工作（请参阅图片 - 顶部铬，底部ff）。自昨晚以来我的系统（Windows）上没有任何变化，今天升级到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-weight和font-style。这没有留下猜测的余地。

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

}