Chrome 应用程序，引导图标，如何加载 Glyphicons Halflings.woff

Question

我正在构建一个 chrome 打包的应用程序，并且想使用 Bootstrap。

Bootstrap 具有提供一些图标的 Glyph Halflings 字体。

当我包含 boostrap.css 时，我从未在开发工具的网络选项卡中看到加载的字体文件。

阅读其他帖子，我尝试了这个，但我无法在我的应用程序或网络选项卡中看到。字体永远不会加载：

/* Assist for Bootstrap icons */
@font-face {
  font-family: 'Glyphicons Halflings';
  src: url("data:font/woff;charset=utf-8;base64,d09GRgABAAAAAFsYABEAAAAAoU...VLmWK4AAA==") format('woff');
}

还尝试了 mime 类型 application/font-woff 和 application/x-font-woff 也试过了：

src: data-uri(~'@{fonts}@{glyphicons-halflings-regular}.woff') format('woff')
src: data-uri(~'@{fonts}@{glyphicons-halflings-regular}.woff') format('woff')

我的字体在 /fonts/glyphicons-halflings-regular.woff ttf、oet 和 svg 也是选项。

我正在通过查找图标并在开发工具的网络选项卡中查找任何流量来对此进行测试。

Chrome 打包应用中如何包含字体？

解决方案

Chrome 没有问题。我在 CSS (BS3) 中使用了错误的 HTML (BS2)

Answer 1

尝试将mime类型设置为application/font-woff，如下：

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url("data:application/font-woff;base64,d09GRgABAAAAAFsY....==") format('woff');
}

以上应该可以工作，另请参阅：http://caniuse.com/#feat=woff

更少的代码：

@font-face {
  font-family: 'Glyphicons Halflings';
  src: data-uri(~'@{icon-font-path}@{icon-font-name}.woff') format('woff')
}

请注意，您还必须设置其他与字体相关的类：

// Catchall baseclass
.glyphicon {
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: 'Glyphicons Halflings';
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

// Individual icons
.glyphicon-asterisk               { &:before { content: "\2a"; } }
// and so on