字体为 base64 并具有后备功能答案

【问题标题】：Font-face as base64 with fallbacks字体为 base64 并具有后备功能
【发布时间】：2017-02-07 19:03:36
【问题描述】：

在threat 之后，我想添加如下字体：

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); 
  src: url('webfont.eot?#iefix') format('embedded-opentype'), 
       url('webfont.woff2') format('woff2'), 
       url('webfont.woff') format('woff'), 
       url('webfont.ttf')  format('truetype'),
       url('webfont.svg#svgFontName') format('svg'); 
}

但不是从文件系统加载文件，而是文件内容来自数据库作为 base64 字符串。我的问题是我是否必须为每种格式添加 base64 字符串（woff、woff2、svg、eot、ttf）？喜欢：

url(data:application/font-woff;charset=utf-8;base64,d09GMgABA… 
url(data:application/font-woff2;charset=utf-8;base64,d09GMgABA… 
url(data:application/x-font-truetype;charset=utf-8;base64,,d09GMgABA… 
url(data:image/svg+xml;charset=utf-8;base648;base64,,d09GMgABA… 
url(data:application/vnd.ms-fontobject;charset=utf-8;base64,d09GMgABA…

我问是因为在查看 fontsquirrels 生成的 base64 生成的样式表时，它们只提供一个作为 base64 其他作为本地文件的样式表。

【问题讨论】：

您可能已经意识到这一点，但嵌入所有格式会显着增加所有浏览器用户的文件大小。（也许 fontsquirrel 正在考虑不支持 woff 的浏览器的微小市场份额，并认为“不，不值得”。）
谢谢，这可能是我找不到包含所有格式为 base64 的任何来源的原因。

标签： css

【解决方案1】：

Base64 适用于 ttf 格式。

例子：

    @font-face {
        font-family: "CustomFont";
        src:        url(data:font/truetype;charset=utf8;base64,AAEAAAAQAQAABAAAT...) format("truetype");
    }

【讨论】：