字體為 base64 並具有后備功能

Question

在這個威脅之后，我想包括一個字體如下：

@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 其他作為本地文件的樣式表。

Answer 1

Base64 適用於 ttf 格式。

例子：

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