嵌入Unicode字体

Question

I made a cross-stitch pattern generator, which is live here: http://xstitch.zachrattner.com/

Some of the people who use it say that once a pattern is generated, they can't see the Unicode symbols rendered in the pattern. Here's the CSS I'm using in a sample fix to test an embedded font:

@font-face
{
    font-family: FreeSerif;
    src: url(Fonts/FreeSerif.ttf) format("truetype");
}

*
{
    font-family: FreeSerif;
    font-size: 24px;
}

Wikipedia lists the Unicode blocks that FreeSerif implements. However, if you look at my sample page , some of the symbols won't render.

Any ideas? Thanks in advance.

Answer 1

Just use CSS font priorities.

Information: http://htmlhelp.com/reference/css/font/font-family.html

Also set:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Answer 2

The pages now specify

• { font-family: Helvetica,Verdana,Tahoma,Arial,sans-serif; }

and this is not overridden for the large table containing the stitch pattern. It is quite possible that Helvetica exists in different versions, with varying character coverage; Mac specialists might know about this. But in most computers of the world, there is no font under that name. On such computers, browsers will either use one of the other fonts, failing to display many of the characters as eg Verdana does not contain them, or (more usefully, and in accordance with CSS specs) scan thru the font list until they find one that contains the character being displayed and ultimately falling back to some system−dependent font.

For better predictability and robustness, you could use

td { font-family: "Arial Unicode MS", "Lucida Sans Unicode", "DejaVu Sans", "Quivira", "Symbola", "Code2000", ; }

Cf. to font coverage information: http://www.fileformat.info/info/unicode/char/25ec/fontsupport.htm But you would really need to check that each of the fonts you list contains all of the characters you use in the table.

Other options: 1) Use font embedding (font @face) for some suitable font for which embedding is allowed—but this would probably involve considerable overhead since any font that contains all those characters is probably big . 2) Use small images instead of the special characters.