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

Question

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

这就是问题所在，在 Internet Explorer 中 2 之后有一个很大的空格。如何使用 #css 解决此问题？

IE9中的网站截图

Answer 1

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

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

font-family您可以在声明中列出您首选的备用字体。在您的 CSS 规则中body，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。