Css base64字体呈现方式与二进制字体不同

当字体编码为base64时，我看到字体的呈现发生了奇怪的变化

为了提高页面性能，我正在使用如下方法将网站的webfonts保存为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>

My 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肯定会降低质量。我的客户抱怨单笔报价现在高于基准线太高。我将不得不放弃在本地存储字体

看看这个例子中“This”之前的“This”发生了什么。编码搞砸了

---

如果没有一个实例很难看到，但是您是否尝试过将线高度添加到span标记中

测线高度应为100%，并在跨度标记中

 .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);
}

---

感谢约翰图雷森，我有线条高度-尝试在各种元素上调整它，但似乎没有效果。我加了一个密码笔。

 .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);
}