在 CSS 中嵌入 Glyphicons 作为 data-uri

【问题标题】：Embedding Glyphicons in CSS as data-uri在 CSS 中嵌入 Glyphicons 作为 data-uri
【发布时间】：2025-11-28 10:00:01
【问题描述】：

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

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

（部分列表）

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

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

应用程序确实使用了 SASS——这可能是问题所在吗？

【问题讨论】：

标签： css glyphicons data-uri

【解决方案1】：

你的listing sn-p有几个错误：

src dataURI 值必须在 url() 'function' 内，
它必须具有正确的 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 不应该是生成 sn-p 的问题，因为长文件是 .scss 而不是 .sass。

【讨论】：