How can I force fixed character width with CSS for ANY glyph, including arcane Unicode?

Question

I suspect that this can't be done, but I'm asking just to be sure.

I'd like to force a single character in a <span> to have a specific width and height: 1em.

Ideally the character would be stretched to 1em if it is not already fixed-width.

This must support any character, including rare Unicode glyphs, so I cannot just set the font to Courier.

Finally, this should be accomplished with only CSS, and be simple and lightweight. E.g. a complex solution which includes a div within a table containing a one-pixel image (just to display this single character) is not OK.

I can't remember any property which does this, and attempts to Google have just returned a lot of "fixed width layouts" and nothing about single characters.

If there is no simple solution, but there is a complex one, I won't use it, but I'd be curious to hear it anyway.

Answer 1

You can use @font-face to include a fixed width font with good unicode support. The DejaVu family has excellent unicode support and a mono variant, and should do this nicely. You can use FontSquirrel's @font-face generator to create the files you need for this.