有没有办法使用相同的base64数据URI和两个@ font-face声明？

Posted 2021-04-12

我有一个带有@ font-face声明的CSS文件。相应的字体在声明中存储为base64编码的WOFF。由于您必须信任的原因是好的，我想创建多个@ font-face声明，指向相同的base64 WOFF（意思是，不在CSS文件中复制它，也不将其移动到外部文件。）

可以吗？如果是这样，怎么样？

答案

进一步的研究表明了一个简单的答案：它无法完成。

另一答案

纯CSS没有指针。

看看SASS或LESS，它们是CSS的预编译器。

它们允许（在其他方面）使用变量：

@b64woff: url("data:font/opentype;base64,AAEAAAATAQAABAAwR1BPU7iiypwABG5IAA...");

@font-face {
    font-family: 'YourFont';
    src: @b64woff;
}

事实上，当LESS或SASS编译你的代码时，它将用它的值替换@b64woff的每个实例。