开发者

Smooth fonts with CSS

开发者 https://www.devze.com 2023-01-04 06:13 出处:网络
How can I get smooth fonts? I d开发者_StackOverflow中文版on\'t want the edges to look all fuzzy.

How can I get smooth fonts? I d开发者_StackOverflow中文版on't want the edges to look all fuzzy.

Hacky solutions are not a problem :)

Smooth fonts with CSS


You could use some font replacement solution like Cufón for headers, but it's too inefficient to use for large blocks of text.

If you're looking to change the browser's font rendering, you probably won't have much luck because they all have their own text rendering routines (but look at -webkit-font-smoothing for recent versions of Safari and Chrome).


As was mentioned, there is a CSS property for font-smooth - but I am not sure how widely this is supported. This is most likely a property that you will have to adjust in your OS, or the font itself, which means of course, that would only be local. I know that Windows has a feature called ClearType which allows you to adjust the anti-aliasing to work well with your monitor.

As Ben Alpert mentioned, a font-replacement solution such as Cufon or TypeKit are other potential solutions for title text.


There's actually a CSS property called text-rendering which actually works on the Firefox family of browsers. There's also -webkit-font-smoothing for Safari and Chrome family, as Ben said. I don't know if text-rendering works on Internet Explorer, but this piece of code works pretty fine:

text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;

Also, if you're customizing your browser:

html {
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased !important;
}
0

精彩评论

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