Windows font rendering problems with @font

I'm having troubles with @font-face on Windows computers (no mather what browser). It works okay in linux and osx.

This is the css code i'm using (generated with font-squirel)

Check the screenshots for the problem.. There seem to be 2 problems

On windows the fonts are 'dancing'. The are not aligned on the baseline.

On windows the fonts look not anti-aliased.

Anybody has an idea? Thanks in advance.

Screenshot in OSX & Linux:

http://j3rn.org/images/ob_font1.png

Screenshot in Windows:

http://j3rn.org/images/ob_font2.png

CSS code

@font-face {
    font-family: 'SchulbuchNordFett';
    src: url(assets/fonts/schulbuchnord-fett-webfont.eot');
    src: url('assets/fonts/schulbuchnord-fett-webfont.eot?#iefix') format('embedded-opentype'),
         url('assets/fonts/schulbuchnord-fett-webfont.woff') format('woff'),
         url('assets/fonts/schulbuchnord-fett-webfont.ttf') format('truetype'),
         url('assets/fonts/schulbuchnord-fett-webfont.svg#SchulbuchNordFett') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'SchulbuchNordNormal';
    src: url('assets/fonts/schulbuchnord-normal-webfont.eot');
    src: url('assets/fonts/schulbuchnord-normal-webfont.eot?#iefix') format('embedded-opentype'),
         url('assets/fonts/schulbuchnord-normal-webfont.woff') format('woff'),
         url('assets/fonts/schulbuchnord-normal-webfont.ttf') format('truetype'),
         url('assets/fonts/schulbuchnord-normal-webfont.svg#SchulbuchNordNormal') format('svg');
    font-weight: normal;
    font-style: normal;
}

---

We had a similar issue with some of our fonts, and I'm pretty sure what fixed it was setting "Truetype Hinting" to "Keep existing".

---

I was facing the same issue some weeks ago. We are storing vector graphics in a font file to avoid implementing seperate images or css sprites. A simple workaround would be to use for instance font squirrel

http://www.fontsquirrel.com/tools/webfont-generator

without(!) the optimizing option, which processes your font to optimize it for the web and sometimes breaks it due to compression attempts, if they don't fulfill some standards. A possible drawback might be, that your files become a bit larger. You can also try this webservice:

http://fontface.codeandmore.com/indexnew.php

Hope this helps!

---

Well as far as antialiasing goes, windows can be pretty ugly when rendering out thin text. A common trick is to try applying a text stroke like so:

-webkit-text-stroke: 0.3px

As far as your baseline problem, that seems to be an issue with the actual font. If you're not attached to @font-face, I'm pretty partial to Google Webfonts

You'd just have to include a css link in your header, then attach the corresponding font to a css class.

链接地址: http://www.djcxy.com/p/10444.html

上一篇: 将SQL Server 2008升级到2008 R2

下一篇: Windows字体呈现@font的问题