在CSS中嵌入Glyphicons作为data-uri

Question

我有一个使用Glyphicons的Web应用程序，但客户端受限于下载字体。

我发现一个页面，说你可以转换成uri Glyphicon文件，并将它们嵌入到Bootstrap CSS中，我这样做了。

（部分列表）

@font-face { 
    font-family: 'Glyphicons Halflings'; 
    src: "data:application/octet-stream;base64,n04AAEFNAAAC....... 

当我测试它在服务器上，我得到的只有一个框，字形应该的。我错过了一步吗？

该应用程序确实使用SASS--这可能是问题吗？

Answer 1

有自己的商家片断几个误区：

• src dataURI值必须是内部url()“功能”，
• 它必须有正确的MIME类型，而不是application/octet-stream：例如application/font-woff,
• 或相应的format()声明：例如， format('woff')。或者两者都更好。

正确的模板应该像

@font-face { 
    font-family: '[name]'; 
    src: url(data:font/[mime-format];base64,...) format('[css-format]'); 
    /* font-weight, font-style, ... */ 
} 

SASS不应成为导致片段中的问题，只要文件.scss而不是.sass。