@font-face: FF中的粗体比Chrome中的粗体
@font-face: FF中的粗体比Chrome中的粗体
提问于 2012-01-20 22:09:20
我使用了以下代码：
@font-face {
font-family: 'DroidSansRegular';
src: url('droidsans-webfont.eot');
src: url('droidsans-webfont.eot?#iefix') format('embedded-opentype'),
url('droidsans-webfont.woff') format('woff'),
url('droidsans-webfont.ttf') format('truetype'),
url('droidsans-webfont.svg#DroidSansRegular') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'DroidSansBold';
src: url('droidsans-bold-webfont.eot');
src: url('droidsans-bold-webfont.eot?#iefix') format('embedded-opentype'),
url('droidsans-bold-webfont.woff') format('woff'),
url('droidsans-bold-webfont.ttf') format('truetype'),
url('droidsans-bold-webfont.svg#DroidSansBold') format('svg');
font-weight: bold;
font-style: normal;
}当我使用font-weight: bold;时，Chrome中的粗体文本是可以的，但在火狐中就太粗体了。
如何解决这个问题？
PS:我必须使用本地文件中的字体。
回答 8
Stack Overflow用户
回答已采纳
发布于 2012-01-20 22:38:05
这里的问题是，FF接受字体并对其应用粗体字体粗细(所以基本上它会加倍效果)。Chrome似乎没有改变字体粗细，只是使用了正确的字体。我认为这是因为你声明了两个不同的字体系列。对于这种情况，正确的CSS应该是：
@font-face {
font-family: 'DroidSans';
src: url('droidsans-webfont.eot');
src: url('droidsans-webfont.eot?#iefix') format('embedded-opentype'),
url('droidsans-webfont.woff') format('woff'),
url('droidsans-webfont.ttf') format('truetype'),
url('droidsans-webfont.svg#DroidSansRegular') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'DroidSans';
src: url('droidsans-bold-webfont.eot');
src: url('droidsans-bold-webfont.eot?#iefix') format('embedded-opentype'),
url('droidsans-bold-webfont.woff') format('woff'),
url('droidsans-bold-webfont.ttf') format('truetype'),
url('droidsans-bold-webfont.svg#DroidSansBold') format('svg');
font-weight: bold;
font-style: normal;
}请注意，我将字体系列改为"DroidSans“，而不是"DroidSansRegular”和"DroidSansBold“。
Stack Overflow用户
发布于 2013-07-31 03:11:39
FireFox今天在他们的bug论坛上发布了一个解决方案。它今天才最终定稿，所以暂时不会使用，但我们都应该
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;在我们的body标记中为所有浏览器重置此属性。终于！！天哪，这真是太棒了！这应该会在下一个FF版本中出现。
Stack Overflow用户
发布于 2012-04-03 17:18:53
问题是Firefox试图给文本添加粗体效果，即使是已经加粗的自定义字体也是如此。我刚刚遇到了完全相同的情况，并通过在@font-face声明中设置font-weight: normal;来解决它。
示例：
@font-face {
font-family: 'DroidSansBold';
src: url('droidsans-bold-webfont.eot');
src: url('droidsans-bold-webfont.eot?#iefix') format('embedded-opentype'),
url('droidsans-bold-webfont.woff') format('woff'),
url('droidsans-bold-webfont.ttf') format('truetype'),
url('droidsans-bold-webfont.svg#DroidSansBold') format('svg');
font-weight: normal;
font-style: normal;
}你还需要在任何设置了font-weight:bold;的元素(例如h1、h2等)上使用font-weight:normal;，否则火狐仍然会在自定义字体中添加粗体。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/8942625
复制相关文章
相似问题