Fatal编程技术网
  • internet-explorer/
  • Internet explorer Firefox和IE中的ttf单空格字体间距问题

Internet explorer Firefox和IE中的ttf单空格字体间距问题

internet-explorer firefox

Internet explorer Firefox和IE中的ttf单空格字体间距问题,internet-explorer,firefox,whitespace,spaces,monospace,Internet Explorer,Firefox,Whitespace,Spaces,Monospace,在Chrome上，一切正常。在Firefox和IE上（IE是一个.eot文件，由.ttf转换而来），我遇到了与 的字符宽度问题 使用预定义的单空格字体，以适当的宽度显示。但是，如果我使用Ubuntu Mono或我自己的monospace truetype字体，空格字符太窄，并且文本不会在换行符之间垂直对齐。这就好像它正在为空格字符使用另一种字体 如果我在空格字符（32 0x20）中放入一个实际的字形，则间距是正确的。但是，一旦我删除标志符号并再次将空格字符变为空，它将恢复为错误的间距。下面

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

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

如果我在空格字符（32 0x20）中放入一个实际的字形，则间距是正确的。但是，一旦我删除标志符号并再次将空格字符变为空，它将恢复为错误的间距。下面的例子使用从谷歌字体加载的Ubuntu Mono，以便其他人可以使用。例如，字母“t”应该垂直对齐。第二个示例使用内置的monospace字体，看起来不错

HTML示例#1：


在___

1++

倾听

[=]

~z~其他人
HTML示例#2：


在___

1++

倾听

[=]

~z~其他人
HTML
元素解决了我的问题。预格式化文本，它需要单空格字体，空格以正确的宽度呈现。奇怪，但却是真的。至少我找到了解决办法。我只是将所有文本粘贴在
而不是
中。唯一需要更改的是前导空格，因为
不会忽略它们

<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>
    <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>