Vue + webpack，将字体文件转换为base64

Posted 2023-03-23

【中文标题】Vue + webpack，将字体文件转换为base64

【英文标题】：Vue + webpack, convert font files to base64

【发布时间】：2021-04-20 15:34:55

【问题描述】：

我正在编写一个库以导入其他项目，以共享自定义组件和样式。 问题在于字体文件，.woff/.ttf/等。

//_fonts.scss
$woff_path: '~/woff';
$ttf_path: '~/ttf';

@font-face 
    font-family: "MyOpensans";
    src: url($woff_path + "opensans-regular-webfont.woff2") format("woff2");
    src: url($woff_path + "opensans-regular-webfont.woff") format("woff");
    src: url($woff_path + "OpenSans-Regular.ttf") format("font-type");
    font-style: normal;
...


$testfont: "MyOpensans", wingdings;

当我在我的 scss 中使用 $testfont 时，url 使用相对路径，这在导入其他项目时当然不起作用。所以，我的想法就是使用 base64：

src: url(data:application/x-font-woff;charset=utf-8;base64;XXXX);

如果我通过 base64 转换器运行 .woff 文件并粘贴到 _fonts.scss 中，则效果很好。但是，我希望 webpack 为我做这件事。我已经尝试过 base64-inline-loader 和 url-loader。两者都没有工作。 使用 url-loader 进行更多挖掘。如果我在 main.ts 中 import "@/assets/woff/opensans-regular.webfont.woff2";，我可以看到它在主源代码中将 base64 转换为变量，但我的 _fonts.scss 当然不知道这一点，我的 _fonts.scss 仍然有 src 作为相对小路。似乎 url-loader 对 scss 中的 url() 没有任何作用。

我错过了什么吗？有没有办法让 webpack 为我将我的 url(file path) 变成 url(data:xxx)？或者通过其他方式让自定义字体在编译到库时工作？

【参考方案1】：

您可能想考虑使用 base64-inline-loader 之类的东西

根据该页面上的示例：

rules: [
    
        test: /\.(jpe?g|png|ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
        use: ['base64-inline-loader']
    
]