Firefox 和 IE 中的 ttf 等宽字体 nbsp 间距问题答案

【问题标题】：ttf monospace font nbsp spacing issue in Firefox and IEFirefox 和 IE 中的 ttf 等宽字体 nbsp 间距问题
【发布时间】：2015-08-08 11:29:23
【问题描述】：

在 Chrome 上，一切正常。在 Firefox 和 IE 上（IE 是一个 .eot 文件，从 .ttf 转换而来），我遇到 &nbsp 和的字符宽度问题。

使用预定义的等宽字体，&nbsp 以适当的宽度显示。但如果我使用 Ubuntu Mono 或我自己的等宽 truetype 字体，空格字符太窄，并且文本不会垂直对齐换行符。就好像它为空格字符使用了另一种字体。

如果我将实际字形放入空格字符 (32 0x20)，则间距是正确的。但是，一旦我删除了字形并使空格字符再次为空，它就会恢复为错误的间距。下面的示例使用从 Google Fonts 加载的 Ubuntu Mono，以便其他人使用。例如，字母“t”应垂直对齐。第二个例子使用了内置的等宽字体，看起来不错。

HTML 示例 #1：

<html>
    <head>
        <link href='http://fonts.googleapis.com/css?family=Ubuntu+Mono' rel='stylesheet' type='text/css'>
        <meta charset="utf-8">
    </head>
    <body>  
        <h1 style="font-family: 'Ubuntu Mono'; font-size: 200%;">
            &gt;In&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;___
        <br>&nbsp;One&nbsp;&nbsp;&nbsp;&nbsp;&lt;+&nbsp;+&gt;
        <br>&nbsp;&nbsp;&nbsp;eaR&nbsp;&gt;&gt;&nbsp;^&nbsp;&lt;&lt;&nbsp;Out
        <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[=]&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;the
        <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;~&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;OtheR</h1>
    </body>
</html>

HTML 示例 #2：

<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>  
        <h1 style="font-family: monospace; font-size: 200%;">
            &gt;In&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;___
        <br>&nbsp;One&nbsp;&nbsp;&nbsp;&nbsp;&lt;+&nbsp;+&gt;
        <br>&nbsp;&nbsp;&nbsp;eaR&nbsp;&gt;&gt;&nbsp;^&nbsp;&lt;&lt;&nbsp;Out
        <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[=]&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;the
        <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;~&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;OtheR</h1>
    </body>
</html>

【问题讨论】：

标签： internet-explorer firefox whitespace spaces monospace

【解决方案1】：

HTML <pre> 元素解决了我的问题。预先格式化的文本，它需要等宽字体，并且空格以正确的宽度呈现。奇怪，但真实。至少我找到了解决方案。我只是将所有这些文本粘贴在 <pre> 而不是 <h1> 中。唯一需要改变的是前导空格，因为<pre> 不会忽略它们。

【讨论】：