internet explorer语言 - ttf monospace字体nbsp间距问题在Firefox和IE - internet explorer - ttf monospace font nbsp spacing issue in Firefox and IE 小贝子编程网

在Chrome上，一切都很好。在Firefox和IE (IE是从。ttf转换而来的。eot文件)上，我有&nbsp和&#32的字符宽度问题。

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

如果我在空格字符(32 0x20)中放入一个实际的字形，则间距是正确的。但是，一旦我删除字形并使空格字符再次为空，它就会恢复到错误的间距。下面的例子使用从谷歌字体加载的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>

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

internet explorer语言 - ttf monospace字体nbsp间距问题在Firefox和IE

相关内容

最新更新

热门标签：