嵌入式图标字体作为 base64 的问题

Question

我需要嵌入我的字体文件，其中包含我用于我的应用程序的 31 种图标。

由于 webview 只需要一个 html 字符串来呈现视图，我无法加载外部文件，因此决定对我的字体文件进行 base 64 编码。图标字体是使用 icomoon 生成的，导致以下字体定义。

@font-face {
    font-family: 'icons';
    src:  url('icons/icons.eot?nyqxuh');
    src:  url('icons/icons.eot?nyqxuh#iefix') format('embedded-opentype'),
        url('icons/icons.ttf?nyqxuh') format('truetype'),
        url('icons/icons.woff?nyqxuh') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

所有图标均使用原始文件按需要显示（在网络浏览器中）。

之后，我选择了 truetype 字体，并通过 Font Squirrel WebFont 生成器运行启用了 base64encode，现在我的 css 定义如下所示。

@font-face {
    font-family: 'icons';
    src: 
        url(data:font/truetype;charset=utf-8;base64,AAEAAAAQAQAABAAAR....) format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

但图标不再呈现，取而代之的是 'missing icon'。

这里是完整的base64，供参考。

url(data:font/truetype;charset=utf-8;base64,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) format('truetype');

PS：我正在为 webview 使用边缘后端，所以我很确定它应该可以工作。

Answer 1

显然，FontSquirrel 没有在生成的 base64 中包含我的字形。我不确定我是否错过了一个选项，但我通过简单地在 ttf 字体文件上使用 WSL(bash) 上的 base64 并替换 base64.

来解决这个问题

嵌入式图标字体作为 base64 的问题

Issues with embedded icon fonts as base64

html

css

fonts

base64

embedded-fonts