Question

在Chrome上，一切正常。在Firefox和IE上（IE是一个.eot文件，从.ttf转换而来），我和＆amp; nbsp和＆amp;＃32都有字符宽度问题。

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

如果我将一个实际的字形放入空格字符（32 0x20），则间距是正确的。但是一旦我移除了字形并使空格字符再次变空，它就会恢复到错误的间距。下面的示例使用从Google字体加载的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>

Answer 1

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

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

1 个答案: