内联引入 base64 字体

发表于 更新于 分类于 阅读次数 评论数

一. 作用

使用外源文件会增加 HTTP 请求，并且加载的优先级不高，如果需要首屏加载，会严重影响内容的展现。

对于本站 LOGO 引入的特殊字体，选择 base64 能够确保 LOGO 正常显示

不同浏览器以不同方式处理 Web 字体：

  • Chrome 和 Firefox 如果字体在3s内加载成功，文字会从隐藏显示为自定义字体。如果字体在3s后还是获取不到，文字就会从隐藏显示为默认字体 [FOIT]
  • IE 会立即显示系统备用字体，然后在自定义字体到达时将进行替换。现在部分版本的 Chrome 也使用了这种方案 [FOUT]
  • Safari 会等待自定义字体加载成功才显示文字。如果字体一直获取失败，文字就永远也不会出现 [FOIT]

为了解决这些问题，使用 Base64 将字体内联到样式表中：如果 CSS 和字体同时到达，就不会 FOIT 或 FOUT，因为 CSSOM 和字体解析几乎同时发生。

二. 准备

参照 字体子集化 提取字体

打开 Base64 Encoder 将字体转码

三. 应用

以本站标题使用的“古典明朝体”为例

打开　\themes\next\source\css\_custom\

新建　fonts.styl

写入

1
2
// 定义字体
$GuDianMingChaoTi = "data:application/font-ttf;charset=utf-8;base64,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DQrCjS1OcGPCiGdDMAFOC8KPfVF2TsOWW1dPUzABYhZOwobCicOjZsO0DQpZGk/DoWBvw78MwovDt8KLwr/ClcOuw78aDQoNCmh0dHA6Ly93eXR5cGUuY29tLwCpACAAMgAwADEANgAgAGUAhwBgAKYAeQDRAGIAgAD/AAgAUwAXAE4ArAD/AAkAZwAJAJYAUABRAGwAUwD4ADAAAgBPAN0AdQBZAGIAQABnAAkAZwBDAFIAKQAwAAIADQAKAA0ACgBoAHQAdABwADoALwAvAHcAeQB0AHkAcABlAC4AYwBvAG0ALwANAAoADQAKAIsA5QCPAG8ATgD2AP8ADwBlAIcATgD2AFIAbwBnACwAZgAvAGUAhwBgAKYAeQDRAGIAgABVAEYATgAaAFsAVwBPAFMATgCnAFQAwQB2AIQATgCQAOgAUgAGADAAAgANAAoADQAKAGUAhwBgAKYAeQDRAGIAgABbAFcATwBTAE4ApwBUAMEAUwDvAFEATQCNADkATgALAI8AfQBeAHYAdQAoAE4AjgBOADoAVQBGAE4AGgBbAKIAYgA3AIsAvgCLAKEAYwDQAGgASAAwAAEAYgAWAJcAXgBVAEYATgAaAGAAJwB1ACgAkAAUAP8ADABPAEYAiwC+AIsAoQBUAMEAawBjAF8ADwBTANEAXgADAFIATQCYAHsAgABUAHwA+wBlAIcAYACmAHkA0QBiAIAAjQAtAE4AcABbAFcATwBTAFMA0QBeAAMAYwCIAGcAQwAwAAEAYgAWAFsA+QCXAF4AVQBGAE4AGgBgACcAdQAoAJAAFACPANsAiABMAGIApQBZAAcAMAACAA0ACgANAAoAZwAqAIMAtwBfAJcAZQCHAGAApgB5ANEAYgCAAE4AZgCXAGIAYwCIAGcAQwB2AIQAYADFAFEAtQBOAAsA/wAMAE4ADQBfAJcAUwDRAF4AAwBPAH8AdQAoAE4AhgBlAIcAYACmAHkA0QBiAIAAWwBXAE8AUwBOAKcAVADBAHYAhACLAL4AiwChAFQAwQD/AAwAZQCHAGAApgB5ANEAYgCAAFwABgBPAN0AdQBZAI8A/QB6AHYAXgB2AIkAgQBsAEIAjQBUAFAAfwBPALUAZwBDAI0AIwBOAPsAYwBfAFkAMQB2AIQAZwBDAFIAKQAwAAIADQAKAA0ACgCNAC0ATgBwAGMAiABnAEMAMAABAE4ACwCPAH0AUQB2AE4A1gBbAFcATwBTADAAAQBiABYATgCGAIkA4wBmAPQAWQAaAE8A4QBgAG8A/wAMAIsA9wCLAL8AlQDuAP8AGgANAAoADQAKAGgAdAB0AHAAOgAvAC8AdwB5AHQAeQBwAGUALgBjAG8AbQAvAGUAhwBgAKYAUwDkAFEAeABmAA4AZwAdAE8AUwAgACgAlwBeAFUARgBOABoATwB/AHUAKAApACAAVwA1AFIAZQBnAHUAbABhAHIAVwBlAG4AWQB1AGUAIABHAHUARABpAGEAbgBNAGkAbgBnAEMAaABhAG8AVABpACAAKABOAG8AbgAtAEMAbwBtAG0AZQByAGMAaQBhAGwAIABVAHMAZQApACAAVwA1ADoAVgBlAHIAcwBpAG8AbgAgADAALgAwADAAOQBlAIcAYACmAFMA5ABRAHgAZgAOAGcAHQBPAFMAIAAoAJcAXgBVAEYATgAaAE8AfwB1ACgAKQAgAFcANQBWAGUAcgBzAGkAbwBuACAAMAAuADAAMAA5ACAARABlAGMAZQBtAGIAZQByACAAMgA5ACwAIAAyADAAMQA3AFcAZQBuAFkAdQBlAEcAdQBEAGkAYQBuAE0AaQBuAGcAQwBoAGEAbwBUAGkATgBvAG4ALQBDAG8AbQBtAGUAcgBjAGkAYQBsAFUAcwBlAC0AVwA1AGUAhwBgAKYAMAABAGUAhwBgAKYAeQDRAGIAgAAwAAEAdgD4AFEAcwBbAFcAaAAHAP8ACABsAG8AZwBvAHQAeQBwAGUA/wAJAHsASQBmAC8AZQCHAGAApgB5ANEAYgCAAP8ACABTABcATgCsAP8ACQBnAAkAlgBQAFEAbABTAPgAVwAoAE4ALQBTAE4ATgC6AGwAEQBRAHEAVACMAFYA/QBUAIwA/wAPAGIAFgBRAHYATgDWAFYA/QBbALYAdgCEAGwA6ABRAIwAVQBGAGgABwBiABYAVQBGAGgABwAwAAIAZQCHAGAApgB5ANEAYgCAAP8ACABTABcATgCsAP8ACQBnAAkAlgBQAFEAbABTAPgAaAB0AHQAcAA6AC8ALwB3AHkAdAB5AHAAZQAuAGMAbwBtAC8AqQAgADIAMAAxADYAIABlAIcAYACmAHkA0QBiAIAA/wAIAFMAFwBOAKwA/wAJAGcACQCWAFAAUQBsAFMA+AAwAAIATwDdAHUAWQBiAEAAZwAJAGcAQwBSACkAMAACAA0ACgANAAoAaAB0AHQAcAA6AC8ALwB3AHkAdAB5AHAAZQAuAGMAbwBtAC8ADQAKAA0ACgCLAOUAjwBvAE4A9gD/AA8AZQCHAE4A9gBSAG8AZwAsAGYALwBlAIcAYACmAHkA0QBiAIAAVQBGAE4AGgBbAFcATwBTAE4ApwBUAMEAdgCEAE4AkADoAFIABgAwAAIADQAKAA0ACgBlAIcAYACmAHkA0QBiAIAAWwBXAE8AUwBOAKcAVADBAFMA7wBRAE0AjQA5AE4ACwCPAH0AXgB2AHUAKABOAI4ATgA6AFUARgBOABoAWwCiAGIANwCLAL4AiwChAGMA0ABoAEgAMAABAGIAFgCXAF4AVQBGAE4AGgBgACcAdQAoAJAAFAD/AAwATwBGAIsAvgCLAKEAVADBAGsAYwBfAA8AUwDRAF4AAwBSAE0AmAB7AIAAVAB8APsAZQCHAGAApgB5ANEAYgCAAI0ALQBOAHAAWwBXAE8AUwBTANEAXgADAGMAiABnAEMAMAABAGIAFgBbAPkAlwBeAFUARgBOABoAYAAnAHUAKACQABQAjwDbAIgATABiAKUAWQAHADAAAgANAAoADQAKAGcAKgCDALcAXwCXAGUAhwBgAKYAeQDRAGIAgABOAGYAlwBiAGMAiABnAEMAdgCEAGAAxQBRALUATgALAP8ADABOAA0AXwCXAFMA0QBeAAMATwB/AHUAKABOAIYAZQCHAGAApgB5ANEAYgCAAFsAVwBPAFMATgCnAFQAwQB2AIQAiwC+AIsAoQBUAMEA/wAMAGUAhwBgAKYAeQDRAGIAgABcAAYATwDdAHUAWQCPAP0AegB2AF4AdgCJAIEAbABCAI0AVABQAH8ATwC1AGcAQwCNACMATgD7AGMAXwBZADEAdgCEAGcAQwBSACkAMAACAA0ACgANAAoAjQAtAE4AcABjAIgAZwBDADAAAQBOAAsAjwB9AFEAdgBOANYAWwBXAE8AUwAwAAEAYgAWAE4AhgCJAOMAZgD0AFkAGgBPAOEAYABvAP8ADACLAPcAiwC/AJUA7gD/ABoADQAKAA0ACgBoAHQAdABwADoALwAvAHcAeQB0AHkAcABlAC4AYwBvAG0ALwBoAHQAdABwADoALwAvAHcAeQB0AHkAcABlAC4AYwBvAG0ALwBlAIcAYACmAFMA5ABRAHgAZgAOAGcAHQBPAFMAIAAoAJcAXgBVAEYATgAaAE8AfwB1ACgAKQBXADUAZQCHAGAApgB5ANEAYgCAAP8ACABTABcATgCsAP8ACQBnAAkAlgBQAFEAbABTAPgAMAACAE8A3QB1AFkAYgBAAA0ACgBnAAkAZwBDAFIAKQAwAAIADQAKAA0ACgBoAHQAdABwADoALwAvAHcAeQB0AHkAcABlAC4AYwBvAG0ALwANAAoADQAKAIsA5QCPAG8ATgD2AP8ADwBlAIcATgD2AFIAbwBnACwAZgAvAGUAhwBgAKYAeQDRAGIAgABVAEYATgAaAFsAVwANAAoATwBTAE4ApwBUAMEAdgCEAE4AkADoAFIABgAwAAIADQAKAA0ACgBlAIcAYACmAHkA0QBiAIAAWwBXAE8AUwBOAKcAVADBAFMA7wBRAE0AjQA5AE4ACwCPAH0AXgB2AHUAKABOAI4ADQAKAE4AOgBVAEYATgAaAFsAogBiADcAiwC+AIsAoQBjANAAaABIADAAAQBiABYAlwBeAFUARgBOABoAYAAnAHUAKAANAAoAkAAUAP8ADABPAEYAiwC+AIsAoQBUAMEAawBjAF8ADwBTANEAXgADAFIATQCYAHsAgABUAHwA+wBlAIcAYACmAA0ACgB5ANEAYgCAAI0ALQBOAHAAWwBXAE8AUwBTANEAXgADAGMAiABnAEMAMAABAGIAFgBbAPkAlwBeAFUARgBOABoADQAKAGAAJwB1ACgAkAAUAI8A2wCIAEwAYgClAFkABwAwAAIADQAKAA0ACgBnACoAgwC3AF8AlwBlAIcAYACmAHkA0QBiAIAATgBmAJcAYgBjAIgAZwBDAHYAhABgAMUAUQC1AE4ACwD/AAwADQAKAE4ADQBfAJcAUwDRAF4AAwBPAH8AdQAoAE4AhgBlAIcAYACmAHkA0QBiAIAAWwBXAE8AUwBOAKcAVADBAHYAhAANAAoAiwC+AIsAoQBUAMEA/wAMAGUAhwBgAKYAeQDRAGIAgABcAAYATwDdAHUAWQCPAP0AegB2AF4AdgCJAIEAbABCAA0ACgCNAFQAUAB/AE8AtQBnAEMAjQAjAE4A+wBjAF8AWQAxAHYAhABnAEMAUgApADAAAgANAAoADQAKAI0ALQBOAHAAYwCIAGcAQwAwAAEATgALAI8AfQBRAHYATgDWAFsAVwBPAFMAMAABAGIAFgBOAIYAiQDjAGYA9AANAAoAWQAaAE8A4QBgAG8A/wAMAIsA9wCLAL8AlQDuAP8AGgANAAoADQAKAGgAdAB0AHAAOgAvAC8AdwB5AHQAeQBwAGUALgBjAG8AbQAvAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAoACgAAAQIBAwEEAQUBBgEHAQgBCQEKB3VuaUZGMEMHdW5pNTM0Mwd1bmk1M0YwB3VuaTZDNjAHdW5pNzA3NQd1bmk4MEE1B3VuaThGMTUHdW5pNjE1NQd1bmk5QTAxAAA="

即格式为

1
$字体名 = "data:application/font-ttf;charset=utf-8;base64,编码"

继续添加

1
2
3
4
5
6
7
8
9
10
11
// 引入字体
@font-face {
  font-family: 'GuDianMingChaoTi';
  src: url($GuDianMingChaoTi) format("truetype");
  font-weight: bold;
}
// 设定字体
.site-title, .site-subtitle {
  font-family: GuDianMingChaoTi;
  color: $fontColor;
}

打开　\themes\next\source\css\main.styl

在末尾添加　@import "_custom/fonts";



参考文档：

特殊字体文件转Base 64格式的处理步骤 - Tingglelaoo
Web 性能优化（6）——WebFont 字体优化 – neoFelhz
[译]Base64 编码&性能 – oceanvitas

相关推荐