如何防止重复webfont定义闪烁？

Question

假设我在某些@font-face CSS规则中定义了webfont。在运行时我想通过JS添加更多CSS。我不是在谈论FOUT at load time。

恰好，我的框架偶尔会再次添加相同的@font-face规则。事实证明这使Firefox和Chrome尝试重新下载（或加载磁盘缓存）字体文件，这会导致闪烁。

演示：http://jsfiddle.net/Hg9Pc/ _{（Firefox;此特殊情况在Chrome中运行正常）}

除了“不做”之外，有没有办法防止这种闪烁？ 疯狂的缓存标题还是什么？

Answer 1

如果您实际上调用另一个@font-face电话，我认为您无法阻止闪烁。但是，您似乎可以执行以下两项操作之一：

1. 让javascript筛选并在将其加载到页面之前删除该额外的定义（我认为这绝对是一项相当困难的任务，但并非不可能）。

2. 如果可以，请使用其他字体名称定义原始实现。例如，原始字体可能被定义为My Arial，所以稍后Arial（我知道你不会使用@font-face用于Arial，它仅用于示例）通过框架加载（两者都指向同一个文件进行定义），不应该出现闪烁，因为页面实际上并没有尝试替换My Arial定义。这样做的问题是，如果有一个实例，你 做 希望它覆盖，那就不会。