base64字體與二進制字體的呈現方式不同

Question

當將字體編碼為base64時，我看到字體的呈現方式發生了奇怪的變化。

為了提高頁面性能，我正在使用Smashing Magazine's之類的方法將網站的網絡字體保存為localStorage中的base64數據。 JS非常簡單。 但是，當我將woff字體數據轉換為base64時，標題中的字體呈現出不同的效果。

這是二進制字體的外觀：

這就是base64中發生的情況：

在每種情況下，HTML都是相同的：

<h3 class="title">
    <a href="http://domain.co.uk/sarah-palin-923489/"><span>What happens after Sarah Palin's teleprompter breaks is hardly surprising</span></a>
</h3>

和CSS：

.title {
    font-size: 26px;
    line-height: 1.2;
    position: relative;
    z-index: 2;
    font-family: ScoutBold, Arial, Helvetica, sans-serif;
    font-weight: normal;
}

span {
    color: white;
    background-color: rgba(126, 211, 33, 0.8);
    box-shadow: 10px 0 0 rgba(126, 211, 33, 0.8), -10px 0 0 rgba(126, 211, 33, 0.8);
}

我的scout-light.woff字體包含如下二進制數據：

774f 4646 0001 0000 0000 7856 0011 0000
0001 1564 0001 0000 0000 76a0 0000 01b6
0000 02f9 0000 0000 0000 0000 4750 4f53
0000 65d0 0000 0da6 0000 47f2 b51f 87a4

我在這里上傳woff文件，並將其粘貼到我的字體CSS中，如下所示：

@font-face {
  font-family: ScoutLight;
  src: url(data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAGKIABMAAAAA70AAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAABqAAAABwAAAAcak+p20dERUYAAAHEAAAAMgAAADgCIAEQR1BPUwAAAfgAAA3LAABSqL7EBrtHU1VCAAAPxAAAAJIAAAEmGQ8brU9TLzIAABBYAAAA... mCGKVBUG8hLUWlnoKDzARBPFyOqu7sZs3/ye8zwgX1qK/7nqAq+wbV3RzzGSL5YaCo5yhK7YdQ17VyMUS46p+MW4zZomvI+XYSoxD5Qj2xoFyCJGxX9X34KHhEfybhkvwThqOGnP/Z2wqOjuNhMAnPwCm+rMRZVNhiZ43B2KmNqQwZUMmp4ZsNbAg5ouBY2LhGUosxQdf6EtzAAABVCFFcAAA) format("woff"), url("../fonts/scout-light/scout-light.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

因此，我假設編碼后的數據與未編碼后的數據非常匹配。 那是唯一的區別。 當字體數據編碼的所有不同之處時，有人可以建議為什么我會在渲染中看到這種變化嗎？ 我應該使用其他方法編碼嗎？

此處為base64版本的示例。

///////////////////////////////////////////////// ///////

我發現將字體編碼為base64肯定會導致質量下降。 我的客戶抱怨現在單引號的位置比基線高。 我將不得不放棄在本地存儲字體。

查看此示例中“此”之前的'發生了什么。 編碼將其擰緊。

Answer 1

沒有實際示例很難看，但是您是否嘗試過將line-height添加到span-tag

線高應為100％，並在span標簽中。

 .title {
  position: relative;
  z-index: 2;
  font-family: ScoutBold, Arial, Helvetica, sans-serif;
}

.title span {
  line-height: 100%;
  font-size: 25px;
  background-color: rgba(126, 211, 33, 0.8);
  box-shadow: 10px 0 0 rgba(126, 211, 33, 0.8), -10px 0 0 rgba(126, 211, 33, 0.8);
}