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

Question

我正在构建一个经常使用下标 2 的网站，例如 H₂O。 2 是使用 HTML 代码 2 而不是标签创建的。

这就是问题所在，在 Internet Explorer 中 2 后面有一个很大的空格。如何使用 #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';

很难说应该放入列表中的内容和顺序，但上面应该涵盖了几乎所有的浏览情况，并且呈现结果可以接受。仍然存在混合不同字体的字形的问题，因此结果不会真正好。为获得最佳效果，下标应与其他字符使用相同的字体。

另一种方法是使用不同的基本字体而不是 Open Sans。在 Google 字体中，您可能会考虑 Source Sans Pro。这是一个不错的无衬线字体系列，有许多字体（粗细从 200 开始），它包含 SUBSCRIPT TWO；您需要在 Google Web Fonts 中选择“Latin Extended (latin-ext)”复选框，否则不会包含 SUBSCRIPT TWO。