在Firefox和IE中自定義字體覆蓋顯式行高

我有一個自定義的圖標字體，我一直在FontForge中構建。我遇到了一些不尋常的事情，因爲它改變了HTML中塊級元素的高度，但不是在Chrome中。在Firefox和IE中自定義字體覆蓋顯式行高

例子：

<html> 
    <head> 
     <style> 
      html { font-family: Arial, Helvetica, sans-serif; } 
      .double { font-size: 200%; } 
      div { margin-bottom: 1.5em; } 

      @font-face { 
       font-family: iconfont; 
       src: url('http://cheesefish.net/techchoicesymbol-webfont.eot'); 
       src: url('http://cheesefish.net/techchoicesymbol-webfont.eot?#iefix') format('embedded-opentype'), 
        url('http://cheesefish.net/techchoicesymbol-webfont.woff') format('woff'), 
        url('http://cheesefish.net/techchoicesymbol-webfont.ttf') format('truetype'), 
        url('http://cheesefish.net/techchoicesymbol-webfont.svg#techchoicesymbolmedium') format('svg'); 
       font-weight: normal; 
       font-style: normal; 
      } 

      .action { 
       display: inline-block; 
       line-height: 1.5; 
       background-color: orange; 
       padding: 0 0.5em; 
      } 

      .iconfont { font-family: iconfont; } 
     </style> 
    </head> 
    <body> 
     <div> 
      <span class="action"><span class="iconfont">&#xE013;</span> Go for a drive</span> 
      <span class="action">&#x2603; Have a snowman</span> 
     </div> 

     <div class="double"> 
      <span class="action"><span class="iconfont">&#xE013;</span> Go for a drive</span> 
      <span class="action">&#x2603; Have a snowman</span> 
     </div> 
    </body> 
</html>

直播： http://jsfiddle.net/aGHxw/2/ 或http://cheesefish.net/symbol-test.html如果你的瀏覽器不支持CORS

（注：請確保您的結果窗格中是足夠寬的2倍大小的按鈕是並排的）。

正如您所看到的，每個黃色按鈕上有一個明確的行高1.5。這應該覆蓋字體中任何奇怪的指標，並且確實在Chrome中它 - 內容高度爲24像素（對於2x大小的按鈕，高度爲48像素）。

但是在Firefox和IE中，結果都略有不同。在Firefox中，使用我自定義webfont的按鈕可以放大到25px高（對於2x大小的按鈕，高49px）。在IE中，尺寸是可以的，但對於2x尺寸的按鈕，帶有我的字體的按鈕向上偏移一個像素。

這個字體有一些有點奇怪的垂直指標;一些字形是1.5em高（延伸0.375em在基線以下，1.125em以上，上升1024（em爲1024單位），下降爲0，在OS/2表中，所有上行和下行都設置爲包含最大的字形（上升1152和下降-384，或在'Win Descent'，+ 384的情況下）。你上面的樣品中看到的結果與「固定垂直度量」關閉開啓該設置上產生同樣怪異，但不同的，結果

來源

2012-11-16 Paul d' Aoust

我覺得您遇到樓梯縮放：。

當文本向上或向下放大時，瀏覽器會計算最終大小爲的文本（這是指定的字體大小和應用的縮放比例）和從平臺的字體系統請求計算大小的字體。但是，如果您請求比例爲9的字體大小（比例爲140％），則生成的字體大小爲12.6並不明確存在於字體系統中，因此瀏覽器將字體大小舍入爲12。這導致文本的階梯縮放。

來源：https://developer.mozilla.org/en-US/docs/Web/CSS/text-rendering

正如你可以添加text-rendering: geometricPrecision;到您的樣式表的修復。

來源

2013-09-24 16:17:17 allcaps

嗯，這是有趣的;我從來沒有聽說過樓梯縮放。但是，MDN文檔似乎指的是SVG上下文中的階梯縮放，而我正在使用HTML。試圖添加CSS屬性到我的頁面，它似乎仍然有相同的問題......想知道是否還有我應該探索的文本渲染的其他方面？ –

你說得對。這不是樓梯縮放。當我嘗試做一個SSCCE時，我得出了另一個結論。看到我的其他答案。 – allcaps

在金屬類型中，點的大小測量爲字母上升的金屬體的高度。這個概念使其成爲數字類型。
瀏覽器通過基線在同一文本行中對齊字體。但字體在身體上的位置各不相同。這與x高度，上升和下降的變化有關。

的原因，你的兩個塊級元素具有不同的高度：

該車來自@字體面字體。
雪人在@ font-face字體中不可用，因此來自默認的瀏覽器字體。
不同的字體！因此不同的x高度，上升和下降比率。

查看我的fiddle作爲身體和輪廓位置變化的證據。 JS：

* { 
    font-size: 48px; 
} 
@font-face { 
    font-family: iconfont; 
    src: url('http://cheesefish.net/techchoicesymbol-webfont.ttf') format('truetype'); 
} 
span { 
    background-color: gray; 
    color: white; 
} 
.iconfont { 
    font-family: iconfont; 
} 
.arial { 
    font-family: Arial; 
} 
.times { 
    font-family: Times; 
} 
.helvetica { 
    font-family: Helvetica; 
}

HTML：

<!-- All fonts are 48px but still have diffrent body size. --> 
<!-- Iconfont doens't have a-z, A-Z, 0-9 but does display a snowman! :/ --> 
<span class="iconfont">&#xE013; a-z, A-Z, 0-9 &#x2603;</span> 

<span class="arial">Hx</span> 
<span class="times">Hx</span> 

<span class="helvetica">Hx</span> 
<!-- Snowman isn't an iconfont glyph. --> 
&#x2603;

鉻：

Chrome screenshot