有没有一种方法可以嵌入@字体面板的src？

Question

我不想引用CSS中的其他文件。

我试图找到一种方法嵌入字体文件在我的CSS (TTF，EOT，WOFF)。我知道有一种方法可以嵌入图像，例如：

background-image: url("data:image/png;base64, +IDx4OnhtcG1ldG…+kJggg==");

是否有方法对@font-face的src值执行相同的操作？

Answer 1

您可以为此使用base64：

@font-face {
    font-family: 'latoregular';
    src: url(data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAHwwABMAAAAA4IwAAQAAAAAAAAAAA[...]) format('woff'),
    url('lato-reg-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

您可以在base64中生成http://www.fontsquirrel.com/字体