覆盖@ font-face src URL？

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

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

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

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

来源

2013-06-03 Mason G. Zhwiti

你可以张贴一些代码？ –

网页是否加载并使用正确的字体？ – rvidal

我发现了这个问题，将它作为一个单独的答案发布......最终它是一个错字！感谢您的反馈，因为发布代码（如@DavidStarkey问）最终导致我发现问题！ –

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

覆盖@ 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; 
}

当我们试图重写，我们意外地放弃了“格式（‘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')定义，我们不再经历了额外的匹配数导致了404s。

来源

2013-06-03 19:59:10

这是一个有趣的实验，因为在CSS规范中找不到关于重写行为的任何具体内容。您是否发现它在不同浏览器中保持一致？ – rvidal

@ rvidal对于这个特定的项目，我们没有在Chrome中通过测试，这是使用中最主要的浏览器。我想我们会尽力让它在那里工作，然后进一步测试，但目前为止没有运气。我们现在已经采取了将FontAwesome CSS移至正常缩小范围之外的方式，这意味着页面加载时会出现额外的HTTP请求，但是目前为止唯一的解决方法。 –

@MasonG。Zhwiti我在这里有同样的问题。不是我的图标显示，我确定'src：url'指向正确的文件夹。我知道这一点，因为如果我做了'www.example.com/fonts/fontawesome-webfont.eot'这个文件就会下载。你是如何解决你的问题的？ –

简单重写基CSS类的FONT-FAMILY：

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

然后，粘贴/ include和编辑字体定义：

@font-face { 
    font-family: 'FontAwesome2'; 
    src: url('//host.domain/yourpath/fontawesome-webfont.eot?v=3.1.0'); 
    ... 
    font-style: normal; 
}

来源

2016-01-27 10:23:41 Xander

覆盖@ font-face src URL？

回答

相关问题