Windows 7 中的 @font-face 渲染
我使用 @font-face 来启用自定义字体。它适用于 Firefox、IE、Safari 和 Mac 上的 Chrome。在装有 Chrome 的 Windows 7 上，10 像素的文本看起来是绿色的，而不是黑色或灰色的！ ...经过更多测试：Firefox (Windows) 和 Safari (Windows) 存在同样的问题
也许它与 Windows ClearType 渲染有关。但为什么它在 Internet Explorer 中有效？
页面直接链接：http://www.light-work.de/chrome.html
真的很奇怪！仅当字体大小为 10px（我需要的大小）时才会出现此问题。在 light-work.de/webfontkit/ 下您可以看到样本概述。
更大的屏幕截图：http://light-work.de/styles/02.png
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>google chrome</title>
<style>
/* Generated by Font Squirrel */
@font-face {
font-family: 'M10Regular';
src: url('http://light-work.de/styles/m10/m10-webfont.eot');
src: url('http://light-work.de/styles/m10/m10-webfont.eot?#iefix') format('embedded-opentype'),
url('http://light-work.de/styles/m10/m10-webfont.woff') format('woff'),
url('http://light-work.de/styles/m10/m10-webfont.ttf') format('truetype'),
url('http://light-work.de/styles/m10/m10-webfont.svg#M10Regular') format('svg');
font-weight: normal;
font-style: normal;
}
body {
font-family: 'M10Regular';
line-height: 20px;
font-size: 10px;
color:#666666;
}
</style>
</head>
<body>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</body>
</html>
I use @font-face to enable custom fonts. It works in Firefox, IE, Safari and in Chrome on Mac. On Windows 7 with Chrome the text at 10px look green not black or grey!
... after more testing: same problem with Firefox (Windows) and Safari (Windows)
Maybe it has something to do with the Windows ClearType rendering. But why it works in Internet Explorer??
Direct link to the page: http://www.light-work.de/chrome.html
It´s really strange! The problem occurs only with 10px fontsize (the size that I need). Under light-work.de/webfontkit/ you can see the specimen overview.
A bigger screenshot: http://light-work.de/styles/02.png
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>google chrome</title>
<style>
/* Generated by Font Squirrel */
@font-face {
font-family: 'M10Regular';
src: url('http://light-work.de/styles/m10/m10-webfont.eot');
src: url('http://light-work.de/styles/m10/m10-webfont.eot?#iefix') format('embedded-opentype'),
url('http://light-work.de/styles/m10/m10-webfont.woff') format('woff'),
url('http://light-work.de/styles/m10/m10-webfont.ttf') format('truetype'),
url('http://light-work.de/styles/m10/m10-webfont.svg#M10Regular') format('svg');
font-weight: normal;
font-style: normal;
}
body {
font-family: 'M10Regular';
line-height: 20px;
font-size: 10px;
color:#666666;
}
</style>
</head>
<body>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</body>
</html>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
您的示例网页在 64 位 Windows 7 上使用 Chrome v11.0.696.60 呈现为灰色（实际上是#666666）。
右键单击您认为不正确的文本以调出上下文菜单。然后，单击
检查元素。这将打开开发者工具。他们会帮助您解决问题。这是我看到的如您所见，Chrome 正在渲染您的页面根据您指定的样式。
Your example web page renders in grey (#666666, actually) for me with Chrome v11.0.696.60 on 64-bit Windows 7.
Right-click on the text that doesn't seem right to you to bring up the context menu. From that, click
Inspect element. That will open the developer tools. They'll help you sort out your problem. This is what I seeAs you can see, Chrome is rendering your page according to the styles you've specified.
好吧，您的文本不在正文标记中。所以你的样式不应该被应用（这显然不在 Chrome 中）。问题应该是：为什么所有其他浏览器都在意你的字体设置？ :-)
Well, your text is not in the body tag. So your style should not be applied (which is obviously isn't in Chrome). The question should be: Why are all the other browsers minding your font setting? :-)