A Techies' Blog

WebKit now supports stroking of text via CSS. In existing Web pages today, the glyphs that are drawn for text are always filled with a single color, specified by the color CSS property. Sometimes authors may want to stroke the edges of the glyphs with one color, and fill with a different color. By stroking text and not filling the interior at all, you can achieve an outline effect (this option exists in TextEdit for example and in OS X text field context menus).

I have introduced four new properties to CSS to support the stroking of text:

text-fill-color – This property allows you to specify a fill color for text. If it is not set, then the color property will be used to do the fill.
text-stroke-color – This property allows you to specify a stroke color for text. If it is not set, then the color property will be used to do the stroke.
text-stroke-width – This property allows you to specify the width of the stroke. It defaults to 0, meaning that only a fill is performed. You can specify a length for this value, and in addition the values thin, medium and thick can be used (with ‘thin’ being most like the outline behavior of OS X).
text-stroke – This property is a shorthand for the two stroke properties. [...]

Add custom fonts to your web application:

• http://www.fontsquirrel.com/fontface/generator
• http://code.google.com/webfonts
• http://onlinefontconverter.com/
• http://www.kirsle.net/wizards/ttf2eot.cgi