css – 覆盖@ font-face src URL?

前端之家收集整理的这篇文章主要介绍了css – 覆盖@ font-face src URL?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我们正在使用带有Bootstrap的FontAwesome。但是,当我们尝试使用FA与我们的自定义minifier,它尝试从一个相对路径加载字体,返回一个404,由于设置了简化的URL结构的方式。

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

然而,现在发生的是我们正确的URL加载字体,并尝试从FontAwesome CSS中原始指定的URL(导致与之前相同的404错误)。

我们做错了什么,还是真的没有办法覆盖@ font-face src网址,以便完全忽略“上游”定义?

解决方法

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

猜你在找的CSS相关文章