问题
I'm a bit struggling with the @font-face CSS option. After a lot of reading, trying, retrying I finally came across a website that makes you a ready-to-go package when you upload your font. It's running now but it seems the font doesn't get anti-aliased. While I see this happening at other websites, mine does not render the headings the way I want.
My CSS code:
@font-face {
font-family: 'YanoneKaffeesatzThin';
src: url('../fonts/yanonekaffeesatzthin-webfont.eot');
src: local('☺'), url('../fonts/yanonekaffeesatzthin-webfont.woff') format('woff'), url('../fonts/yanonekaffeesatzthin-webfont.ttf') format('truetype'), url('../fontsyanonekaffeesatzthin-webfont.svg#webfontyC5sm3N9') format('svg');
font-weight: normal;
font-style: normal;}
What is left to do to make this last, but anoying, issue go away?
回答1:
With CSS3, you can use the font-smooth property, although antialiasing will still be controlled by the system defaults. If you really need to force a clean antialiasing no matter what the OS is, you have to use sIFR which automatically replace the text with a Flash component.
回答2:
Also see: http://www.elfboy.com/blog/text-shadow_anti-aliasing/
The gist is that adding text-shadow: 0 0 1px rgba(0,0,0,0.3); gives the appearance of anti-aliasing.
回答3:
Just a short note about a not so common CSS rule to deal with antialias.
-webkit-font-smoothing: antialiased;
You will have a slight variation in the font rendering for webkit browsers. Generally the font appear more clear and thin. Other values:
-webkit-font-smoothing: subpixel-antialiased;
-webkit-font-smoothing: none;
A demo page: http://maxvoltar.com/sandbox/fontsmoothing/
Not to forget https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Webkit_Extensions
回答4:
Cufon and Typeface.js are two solutions that aggregate and sanitize a lot of the HTML5, CSS3 and JS solutions discussed in this thread.
Each has a converter allowing font files (ttf, otf, wotf) to be converted to scripts that do what you're trying to do -- deliver any font over the web, antialiased.
Of the two, I prefer Cufon http://cufon.shoqolate.com/generate/
回答5:
You need to convert OTF to WOFF:
OTF -> WOFF (Works!)
TTF -> OTF -> WOFF (Works!)
TTF -> WOFF (Doesn't work antialising, common mistake in Google Fonts)
1º) Download the OTF font version
1º alternative) If the font is other and is TTF, convert it to OTF with https://everythingfonts.com/ttf-to-otf
2º) Convert OTF to WOFF https://everythingfonts.com/otf-to-woff
Use only WOFF not EOT, SVG, WOFF2, etc..
来源：https://stackoverflow.com/questions/3451541/css-font-face-anti-aliasing