Question

在使用相同字体（Arial）的同一台机器上，我从Chrome和IE9获得了不同的文字：

<html>
<head>
</head>
<body style="font-family: Arial;">
IIIIIIIII&#x2AF8;
IIIIIIIII&#x2B46;
IIIIIIIII&#x2A20;
IIIIIIIII&#x27A4;
IIIIIIIII&#x27A7;
IIIIIIIII&#x269E;
IIIIIIIII&#x25B6;
</body>
</html>

看起来像这样： enter image description here

为什么会这样？有没有办法让Chrome正确呈现在IE中正确呈现的两个折断箭头？（职位1和3）

Answer 1

您的CSS属性名称有一个拼写错误font-familiy而不是font-family，因此会忽略该声明。但是，声明不会影响渲染，因为Arial不包含使用的特殊字符。这意味着浏览器会尝试从不同的字体中获取字形，并且它们的方法可能会有所不同; IE在很多情况下都没有做到这一点很臭名昭着：即使系统中的某些字体包含它，它也经常无法呈现字符。

要获得更好的渲染效果，您需要分析对常用字体中不同字符的支持，并将合适的列表写为font-family属性的值。您可能希望为不同的字符定义不同的列表，将它们包含在span（或者，为什么不是font）元素中。

例如，第一个特殊字符U + 2AF8（⫸）仅以少数字体存在，但除了列出的字体外 http://www.fileformat.info/info/unicode/char/2af8/fontsupport.htm Cambria Math字体也包含它。所以你可以用它

font-family: Cambria Math, Symbola, Quivira, STIX, Code2000;

您还应该将封闭块元素的line-height属性（如p）设置为合理的值，例如1.3。否则，Cambria Math的非常大的固有线高可能会导致线之间的间距过大。

Answer 2

您的HTML代码缺少Doctype声明，但更重要的是，它缺少字符集声明。

阅读本文以获取更多信息：

<强> The Absolute Minimum Every Software Developer Absolutely, Positively Must Know About Unicode and Character Sets (No Excuses!)

编辑：操作系统/浏览器的各种默认字体集中更有可能缺少这些特定字符。您可以声明正确的字体，但如果用户的系统没有安装它们，则此问题将持续存在。我在Jukka的答案中测试了代码，我认为这是正确的，我无法在Safari Mac中使用它，因为我的系统中没有安装这些字体。

为什么某些特定的Unicode字符不会在Google Chrome中呈现？

2 个答案: