Question

在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'); 
}

但是，不是从文件系统加载文件，而是将filecontent作为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");
    }

Font-face as base64 with fallbacks

1 个答案: