0

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

使用预定义的等宽字体，  以适当的宽度显示。但是如果我使用 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>
4

1 回答 1

0

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

于 2015-06-16T22:28:28.367 回答