@font-face rendering in Windows 7

问题

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>

回答1:

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.

回答2:

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? :-)

来源：https://stackoverflow.com/questions/5910889/font-face-rendering-in-windows-7

标签

css

google-chrome

font-face

embedded-fonts