在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等寬字體間距問題

回答

相關問題