CSS- webkit-text-stroke but stroke covers font-color

Question

Please take a look at here using Chrome : http://jsfiddle.net/u8BdB/

Why the webkit-text-stroke is covering also the font color?

I would like to put stroke outside of the text, it seems like it is assumed inside so it covers the font color :/ unbelievable

any help appriciated thanks.

Answer 1

You can do a CSS-based outside text stroke by using ::pseudo-elements. You can actually even do 2 layers of outside stroke.

You can see the technique on http://www.petercarrero.com/examples/stroke/

This method works only for web-kit browsers. The article also mentions a few of the caveats you need to be aware of to get good results.

I hope that helps you.

Answer 2

This is because the font is relatively small comparing to the 1px stroke.

You can try smaller px value, like 0.3px

Fiddle

Also you can simulate this with text-shadow:

Fiddle