使用缺少字体的Web浏览器降级Unicode字符 [英] Degrading Unicode characters for web browsers with missing fonts

问题描述

我在html文件中使用Unicode'CHECK MARK'（U + 2713）。我发现它在大多数浏览器中呈现OK，但偶尔会遇到某人在PC上丢失字体。如果缺少字体，是否有任何HTML / JS技巧来指定替代显示字符（或图像）？

I am using the Unicode 'CHECK MARK' (U+2713) in a html document. I find that it renders OK in most browsers, but occasionally I encounter someone with a missing font on their PC. Are there any HTML / JS tricks to specify an alternative display character (or an image) if the font is missing?

推荐答案

不是一种直接的方式来判断某个角色是否以有用的方式呈现。关于JavaScript的所有功能，都是创建一个包含目标字体中一个（或多个）目标字符的< span> ，并将其宽度与另一个< span> 包含您知道的相同数量的字符将无法有效渲染（*）。如果它们的宽度相同，则可能是每个框中都带有一些框或问号，因此您可以采取备份措施，例如添加图像。

There's not a direct way to tell if any particular character has rendered in a useful way. About all you can do from JavaScript is to create a <span> containing one (or several) of the target character in the target font, and compare its width to another <span> containing the same number of characters you know won't render usefully(*). If they're the same width, chances are you've got a load of boxes or question marks in each, so you can take backup measures like adding an image.

由于这是相当多的烦恼，你可能更愿意去拍照。或者，您可以尝试在现代浏览器中使用 @ font-face 嵌入来使用一般已知的良好字体。由于通常IE的Unicode字体后备支持较差，因此请确保包含EOT字体。

Since this is quite a lot of annoyance you may prefer to just go for the image. Or you could try using @font-face embedding on modern browsers to use a known-good font in general. Since it is typically IE that has poor Unicode font fallback support, be sure to include an EOT font.

（*：您可以尝试一个当前未分配的字符，并希望保持这种方式，例如U + 08FF，或者保证无效的字符，如U + FFFF，但是否应该允许你将它放在HTML文档中是有问题的。）

(*: you could try a character that's currently unassigned and will hopefully stay that way, eg. U+08FF, or a guaranteed-invalid character like U+FFFF, though it's questionable whether you should be allowed to put that in an HTML document.)

这篇关于使用缺少字体的Web浏览器降级Unicode字符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！