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

Question

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

为了提高页面性能，我正在使用Smashing Magazine's 之类的方法将我网站的 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>

和 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 文件 here 并将其粘贴到我的字体 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 版本here 的示例。

////////////////////////编辑/////////////// //////////

我发现将字体编码为 base64 肯定会导致质量下降。我的客户抱怨单引号现在定位在基线之上太高了。我将不得不放弃在本地存储字体。

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

Answer 1

如果没有现场示例很难看，但是您是否尝试过将 line-height 添加到 span-tag

行高应该是 100% 并且在 span-tag 中。

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