As already noted by hisnameisjimmy , the solution is to use SVG fonts, which are always rendered with anti-aliasing, but this also has some disadvantages:
- SVG fonts do not contain hint information, so the displayed letters are not as crispy as they can be in a system with font smoothing enabled.
- The weight and style of SVG fonts cannot be changed, so using
font-weight:bold; or font-style:italic; has no effect.
However, at least the first problem can be solved using SVG fonts only if font smoothing is actually disabled. There is a good post in User Agent Man on how to define a font-smooting, which I used to create a small script (~ 600 bytes) that automatically updates the CSS font if font smoothing is disabled.
You can find my Font Smoothie script in the GitHub GIST , and all you have to do is add the following line anywhere in your page:
<script src="fontsmoothie.min.js" type="text/javascript"></script>
However, to get pretty verbs you also need a hint . Fortunately, there is a way to add an automatically generated hint to the ttf font using ttfautohint , and then you can use Font Squirrel to create the -fonts webpage. The whole process is a bit complicated, so I wrote an article on how to create pixel-based web fonts | Bytes , which explains how to add hints to the font and how to use my Font Smoothie script. Hope this helps :)
PS: I know that a link to my own blog will not be appreciated here, but I think that my post describes a good solution to the problem, so I posted it anyway. Please leave a comment if you want me to delete the link and I will do it.
Torben
source share