缺失字体的网页浏览器中降级Unicode字符

Question

我在HTML文档中使用了Unicode的“勾选标记”（U+2713）。我发现它在大多数浏览器中呈现正常，但有时我会遇到某些PC上缺少字体的情况。是否有任何HTML / JS技巧可以指定替代显示字符（或图像），如果字体丢失？

- Chris Brent

---

我喜欢这个问题。它在一个复杂系统中以不同抽象级别的问题的正确混合。 - Donal Fellows

（抱歉，我不能回答这个问题。） - Donal Fellows

Answer 1

没有直接的方法来判断任何特定字符是否以有用的方式呈现。从JavaScript中，你所能做的就是创建一个包含目标字体中一个（或多个）目标字符的<span>，并将其宽度与另一个包含同样数量你知道不会呈现有用字符的字符的<span>进行比较(*). 如果它们的宽度相同，那么很可能在每个中都有一堆框或问号，因此您可以采取备份措施，例如添加图像。

由于这是相当麻烦的，您可能更喜欢使用图像。或者您可以尝试在现代浏览器上使用@font-face嵌入来通常使用已知良好的字体。由于通常IE对Unicode字体回退支持不佳，因此请务必包括EOT字体。

(*：您可以尝试使用当前未分配且希望保持不变的字符，例如U+08FF，或保证无效的字符，例如U+FFFF，但是值得怀疑的是，您是否应该允许将其放入HTML文档中。)

- bobince

Answer 2

这并不完全是你所要求的，但它可能会解决你的问题（假设你的目标是输出 HTML 而无需依赖外部图片等）

你考虑过图像数据 URL（也称为 RFC2397）吗： http://www.ietf.org/rfc/rfc2397.txt

与其使用：

✓

如果要表示一个勾选标记，你可以使用:

<img src="data:image/gif;base64,R0lGODlhCgAKAJEAAAAAAP///////wAAACH5BAEAAAIALAAAAAAKAAoAAAISlG8AeMq5nnsiSlsj
zmpzmj0FADs="/>

这不需要在客户端安装特定的Unicode字体来显示勾选标记，但它不能在Internet Explorer 7或更低版本上工作。（Internet Explorer 8，Firefox，Safari等应该可以正常工作）

- userx

---

+1 很好！你是如何将Unicode字体转换为其base-64编码的？你先制作了一个GIF图像吗？ - kol

@kol- 是的，它只是一个字符的图像。但考虑到自从这个答案被给出已经过去了3年，现在更好的方法是使用WOFF而不是我的肮脏技巧。 - userx

Answer 3

如果你能想出一种远程检查 MS Office 2000 或更高版本是否安装的方法，那么你应该能够假设 Arial Unicode MS 已安装，因此在字体中拥有这个代码点（只要 CSS 字体系列设置为 "Arial Unicode MS、Arial、sans-serif" 等）。

我认为这只适用于 Microsoft Internet Explorer，但是你应该能够通过尝试在 JavaScript 中创建其 ActiveX 对象来检测 Word 安装：

if(new ActiveXObject("Word.Application"))
{
    window.alert("Word is installed, go ahead and use the Unicode check mark in HTML");
}
else
{
    window.alert("Word is not installed, use your image of a check mark.");
}

但是考虑到这只在IE中有效，可能会在IE8中引发安全警告，并且您仍然需要为其他浏览器或没有MS Office的IE浏览器提供备用机制，始终使用图像可能是最好的选择。

- userx

---

Word ActiveX控件是否被标记为安全脚本？我怀疑它没有。此外，Arial Unicode MS是强制用户使用的可怕选择。它带来的伤害大于好处。 - Joey

@Joey - 我相信它可以在IE6和IE7的脚本中使用。IE8会抛出安全警告。这是一个可行的解决方案，对于那些无法通过传统方式解决的问题（JavaScript / HTML中没有“此字体已安装”或“此字符是否在浏览器使用的字体中”的功能）。我不确定为什么你会对一个可行的解决方案进行负投票。最好的解决方案可能不是这个（我认为我发布的另一个答案可能更好）。此外，我不确定为什么Arial Unicode MS是一个糟糕的选择，当你知道它有Unicode字符时，只要你正确地回退即可。 - userx

Answer 4

Unicode是相当标准的，我总是使用unicodemap.org。这里是你正在使用的字符[链接]，这将为你提供与勾选标记相关的所有代码。如果你想要完全的向后兼容性，你需要使用一个实际的图像。一个勾选标记的图像文件比一个JavaScript hack/plugin更轻量级。这可能是你最好的选择。

- Stephen Way

---

在回答这个问题时，前两句话基本上是错误的。我相当确定你可以假定他们能够正确地嵌入字符到文档中，并且他们明确表示缺少字体是一个问题，而不是其他什么。 - Joey

我提供了替代代码，以帮助解决他们的问题，因为这个复选框可以用不同的代码实现。我还提供了一个解决方案，适用于所有用户，并且不会通过黑客攻击来拖慢网站速度。 - Stephen Way