How Common Are Unicode Characters In Font Sets?

[Planet13]

Hi all,

Thinking of using the a:before { content:"\2740 ";} to help dress up my a tags a bit.

Then I realized that not all font sets have all of the unicode characters in them.

The strange thing is, the only documentation I have seen says that Verdana (the font on this site) does NOT support unicode character 2740.

However, I CAN see the icon appear before the a tag on the site. (So I guess that documentation is out of date?)

I am using verdana in the body. I have checked the css and the a tag has inherited the verdana font from the body.

So how widespread are unicode icons, and, alternatively, is there a better way to do it than the a:before content tag?

Thanks in advance.

[lucy24]

The missing word is "Font Substitution". Er, missing term. Missing concept. I looked this up recently in a different venue, and learned that even MSIE has been doing font substitution since v. 7. (In the specific area of font support, "even MSIE" is the objectively appropriate wording.) So unless your target audience is in some extremely depressed part of the world, you need not worry about font availability. In one part of my own target audience, government offices used MSIE 6 until just a few years ago, but even they have now upgraded to 8. The ones that started out on 7 may still be there.

:: detour to look up ::

Did you mean decimal 2740 = hex 0ab4, or hexadecimal 2740 = decimal 10048? For the sake of mobiles it's apparently better to use hexadecimal notation. Your site isn't in Gujarati, is it? No, you meant dingbats. "White florette"? Why?

On my system, the character is available in a couple of dozen fonts. So I wouldn't worry about support. There's bound to be at least one, and that's all you need. But don't rely too heavily on a specific "look"; symbols and dingbats often have a wide range of possible renderings.

[Planet13]

Thank you for the reply, Lucy;

Did you mean decimal 2740 = hex 0ab4, or hexadecimal 2740 = decimal 10048?

I meant the "White florette" which just needs to appear before the Add To Basket text link.

When you say,

"For the sake of mobiles it's apparently better to use hexadecimal notation."

Could you tell me how I should rewrite that declaration then? Instead of:

a:before { content:"\2740 ";}

What SHOULD I be using.

"Your site isn't in Gujarati, is it?"

No, it's in America ;)

"So unless your target audience is in some extremely depressed part of the world, you need not worry about font availability."

Well, I guess that means I just lost all my users in Detroit...

[lucy24]

Haha.

Your 2740 (in HTML it would be ❀ ) is hexadecimal so that's fine.

:: detour to CSS docs to look up \ formulation::

I've never used anything but literal characters in a "content" declaration, possibly because I could never get escapes to work :(

If you do use the literal character, make sure your CSS is read as UTF-8. This is probably not an issue. If your HTML is set to UTF-8, then any CSS used by that HTML will automatically also be read as UTF-8 unless you explicitly say otherwise. (This is the short version. You can find the long version in w3c docs.)

"Your site isn't in Gujarati, is it?"

No, it's in America

Har, har. Gujarati is a language. It occupies the 0A80-0AFF hexadecimal sector, which would include the decimal number 2740.

[Planet13]

Ok, thanks for the clarifications.