Windows 7 中的@font-face 渲染答案

【问题标题】：@font-face rendering in Windows 7Windows 7 中的@font-face 渲染
【发布时间】：2011-08-20 03:12:22
【问题描述】：

我使用@font-face 来启用自定义字体。它适用于 Firefox、IE、Safari 和 Mac 上的 Chrome。在带有 Chrome 的 Windows 7 上，10px 处的文本看起来是绿色而不是黑色或灰色！ ...经过更多测试：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>

【问题讨论】：

如果你想要跨浏览器的兼容性，你可以随时使用谷歌字体google.com/webfonts
在这种情况下您应该尝试的第一件事是验证您的 html：validator.w3.org

标签： css google-chrome font-face embedded-fonts

【解决方案1】：

好吧，您的文本不在正文标记中。所以你的风格不应该被应用（这显然不在 Chrome 中）。问题应该是：为什么所有其他浏览器都在意你的字体设置？ :-)

【讨论】：

哦，对不起，搞错了！不幸的是，我仍然在 Google Chrome 中得到错误的颜色。
因为浏览器试图适应无效标记。每个浏览器在尝试将此类无效标记插入有效结构时都会以不同的方式解释它。

【解决方案2】：

您的示例网页在 64 位 Windows 7 上使用 Chrome v11.0.696.60 为我呈现为灰色（实际上是 #666666）。

右键单击您认为不合适的文本以调出上下文菜单。从那里，单击Inspect element。这将打开开发人员工具。他们会帮助你解决你的问题。这是我看到的

如您所见，Chrome 正在根据您指定的样式呈现您的页面。

【讨论】：

谢谢你，一个很棒的工具！经过更多测试后，问题出现在 Firefox 4.01 (WIN)、Safari 5.05 (WIN) 和 Chrome 11.0.696.60 (WIN) 中。我将在更多计算机上测试该页面，但您知道问题可能是什么吗？谢谢。
我已经在其他机器上测试了该站点并且它正在运行。感谢您的帮助！