如何在Internet Explorer中的下标2之后删除多余的空格

Question

我正在建立一个使用下标2的网站，就像在H 2 O中一样。 ²是用HTML代码而不是标签创建的。

这就是问题，在Internet Explorer中有一个很大的空间。我怎样才能用#css解决这个问题？

IE9中网站的屏幕截图

Answer 1

这是一个字体问题。没有完美的解决方案，因为the page使用SUBSCRIPT TWO字符（原则上很好） - 不是任何HTML代码，而是作为UTF-8编码字符（很好）和它使用Open Sans字体，这是一个很好的字体，但不包含SUBSCRIPT TWO。这意味着浏览器将使用一些后备字体，并且IE似乎使用字体，其中SUBSCRIPT TWO的字形在图形的右侧有很多空间（您可以通过使用鼠标绘制字符来看到这一点;后备字体在这种情况下，IE似乎就像Batang一样。）

有两种方法可以解决这个问题。

您可以在font-family声明中列出您首选的后备字体。在body的CSS规则中，您可以使用例如font-family: 'Open Sans'，而不仅仅是font-family: 'Open Sans', 'Calibri', 'Arial Unicode MS', 'DejaVu Sans', 'FreeSans', 'Lucida Sans Unicode'; 。

{{1}}

很难说你应该把什么放在列表中以及按什么顺序排列，但上面应该涵盖几乎所有的浏览情况，并且具有可容忍的渲染结果。还有一个问题是你会混合不同字体的字形，所以结果不会真正好。为获得最佳结果，下标应与其他字符的字体相同。

另一种方法是使用不同的基本字体而不是Open Sans。在Google字体中，您可能会考虑Source Sans Pro。它是一个很好的sans-serif字体系列，有许多字体（权重从200开始），它包含SUBSCRIPT TWO;在Google Web Fonts中选择它时，您需要选中“Latin Extended（latin-ext）”框，否则将不包括SUBSCRIPT TWO。