有没有办法嵌入@ font-face的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;
}

您可以在http://www.fontsquirrel.com/

中生成base64字体