Question

我使用@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 fontsize（我需要的大小）才会出现问题。在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>

Answer 1

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

Answer 2

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

右键单击看起来不正确的文本以显示上下文菜单。然后，点击Inspect element。这将打开开发人员工具。他们会帮助你解决问题。这就是我所看到的

Screenshot of test page in Chrome, with developer tools open

如您所见，Chrome会根据您指定的样式呈现您的网页。

Windows 7中的@ font-face呈现

2 个答案: