@ font-face rendering在Windows 7中 [英] @font-face rendering in Windows 7
问题描述
我使用 @ font-face 启用自定义字体。它适用于Firefox，IE，Safari和Mac上的Chrome。在Windows 7与Chrome的文本在10px看起来绿色不是黑色或灰色！
...更多测试后：与Firefox（Windows）和Safari（Windows）相同的问题
也许它与Windows ClearType呈现有关。
直接链接到页面： http://www.light-work.de/chrome.html
这很奇怪！问题只出现在10px fontsize（我需要的大小）。 lightswork.de/webfontkit / 您可以看到标本概述。
href =http://light-work.de/styles/02.png =nofollow> http://light-work.de/styles/02.png
<！DOCTYPE HTML>
< html>
< head>
< meta http-equiv =Content-Typecontent =text / html; charset = UTF-8>
< title> google chrome< / title>
< style>
/ *由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商品ligula eget dolor。 Aenean massa。 um。。。。。。。。。。。。。。
< / body>
< / html>您的示例网页呈现为灰色（＃666666，< / div>）< / b>实际上）对于我在64位Windows 7上的Chrome v11.0.696.60。
右键单击不适合你的文本，上下文菜单。然后，单击检查元素。这将打开开发工具。他们会帮助你解决你的问题。这是我看到的
正如您所看到的，Chrome会根据您指定的样式呈现您的网页。
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>
解决方案 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 see
As you can see, Chrome is rendering your page according to the styles you've specified.
这篇关于@ font-face rendering在Windows 7中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
