CSS标记文本看起来像提供的样本？

Question

I have seen css that can make text look like an image in the past. I am not a front end developer so my CSS is very rusty...

I am trying to use a DIV tag and markup the text in each div tag to look like the image samples below. notice there is a space between each letter.

if there is a WHYSIWYG CSS editor online that allows for this type of formatting that would be a great resource to have.

EDIT: The hardest part for me is getting a blue square around the first letter!!!

Answer 1

Very quickly, something like this?

http://jsfiddle.net/eW532/

EDIT: Misread...You're talking about the spacing.

EDIT again: http://jsfiddle.net/eW532/1/

Answer 2

Try this I have done this using first-ltter psuedo element jsFiddle . W3Schools on this element here

Answer 3

看起来你需要CSS字母间距属性： http ： //www.w3schools.com/css/pr_text_letter-spacing.asp

Answer 4

you could use the css rule: letter-spacing: 1px; or something, there are more in-depth solutions that require different languages though.