css - 有没有办法嵌入@font-face 的源代码？

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 字体