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

在Chrome上，一切正常。在Firefox和IE上（IE是一个.tt文件，从.ttf转换而来），我的字符宽度问题为& nbsp和&＃32。在Firefox和IE中ttf等宽字体间距问题

使用预定义的等宽字体，& nbsp以适当的宽度显示。但是，如果我使用Ubuntu Mono或我自己的monospace 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>

来源

2015-05-26 jamess

的HTML <pre>元件解决了我的问题。预先格式化的文本，它期望一个等宽字体和空间呈现在正确的宽度。奇怪，但是是真的。至少我找到了一个解决方案。我只是将所有这些文字都粘贴在<pre>而不是<h1>。只有需要改变的是领先空间，因为<pre>不会忽略它们。

来源

2015-06-16 22:28:28 jamess

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

回答

相关问题