27

我们将 FontAwesome 与 Bootstrap 一起使用。但是，当我们尝试将 FA 与自定义缩小器一起使用时，它会尝试从相对路径加载字体，这会返回 404，这是由于设置了缩小 URL 结构的方式。

因此，我们认为解决此问题的最佳方法是在我们的缩小列表中添加一个额外的 CSS 文件，该文件将覆盖 FontAwesome 字体使用的 @font-face src URL。我们基本上只是从 FontAwesome 复制了@font-face 定义，并指定了绝对 URL 位置。

但是，现在发生的情况是我们的正确 URL 加载了字体，并且尝试了 FontAwesome CSS 中最初指定的 URL（导致与之前相同的 404 错误）。

我们做错了什么，还是真的没有办法覆盖@font-face src URL，从而完全忽略“上游”定义？

4

2 回答 2

17

简单地覆盖基 CSS 类的 font-family：

.fa {
  font-family: 'FontAwesome2' !important;
}

然后，粘贴/包含并编辑字体定义：

@font-face {
  font-family: 'FontAwesome2';
  src: url('//host.domain/yourpath/fontawesome-webfont.eot?v=3.1.0');
  ...
  font-style: normal;
}
于 2016-01-27T10:23:41.697 回答
3

更新：下面的“解决方案”实际上并没有工作......我们确实有一个错字，但在随后的测试中，这仍然不是根本原因，我们仍然面临这个问题。

解决方案是在覆盖@font-face 时非常小心，确保提供与原始@font-face 中使用的所有相同格式。否则，浏览器似乎将其视为不同的定义，并将尝试下载两者中引用的文件，而不是覆盖它。

所以这里是FontAwesome的CSS中的定义，先引用。

@font-face {
  font-family: 'FontAwesome';
  src: url('../font/fontawesome-webfont.eot?v=3.1.0');
  src: url('../font/fontawesome-webfont.eot?#iefix&v=3.1.0') format('embedded-opentype'), 
    url('../font/fontawesome-webfont.woff?v=3.1.0') format('woff'), 
    url('../font/fontawesome-webfont.ttf?v=3.1.0') format('truetype'), 
    url('../font/fontawesome-webfont.svg#fontawesomeregular?v=3.1.0') format('svg');
  font-weight: normal;
  font-style: normal;
}

当我们试图覆盖时，我们不小心删除了“format('svg')”定义：

@font-face {
  font-family: 'FontAwesome';
  src: url('//ourdomain.com/includes/font-awesome-3.1.x/font/fontawesome-webfont.eot?v=3.0.1');
  src: url('//ourdomain.com/includes/font-awesome-3.1.x/font/fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'),
    url('//ourdomain.com/includes/font-awesome-3.1.x/font/fontawesome-webfont.woff?v=3.0.1') format('woff'),
    url('//ourdomain.com/includes/font-awesome-3.1.x/font/fontawesome-webfont.ttf?v=3.0.1') format('truetype');
  font-weight: normal;
  font-style: normal;
}

添加format('truetype')定义后，我们不再遇到导致 404 的额外命中。

于 2013-06-03T19:59:10.303 回答