时间戳

首页 > 解决方案 > 嵌入图标字体作为 base64 的问题

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

问题描述

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

由于 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;
}

但是，图标不再呈现，而是出现“丢失的图标”。

这是完整的base64供参考。

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

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

标签： htmlcssfontsbase64embedded-fonts

解决方案

显然，FontSquirrel 没有在生成的 base64 中包含我的字形。我不确定我是否错过了一个选项，但我只需在 ttf 字体文件的 WSL(bash) 上使用 base64 并替换 base64 即可解决这个问题。

推荐阅读