开发者

@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 Wind开发者_开发技巧ows 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

@font-face rendering in Windows 7

As you can see, Chrome is rendering your page according to the styles you've specified.


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

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜