Question

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

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

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

我们做错了什么，或者是否真的无法覆盖@ font-face src网址，以便完全忽略'上游'定义？

Answer 1

简单覆盖基本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;
}

Answer 2

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

在覆盖@ 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的其他点击。

覆盖@ font-face src URL？

2 个答案: