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

Question

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

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

演示:http://jsfiddle.net/Hg9Pc/ _{(Firefox；这种特殊情况在 Chrome 中运行良好)}

除了“只是不要这样做”之外，还有其他方法可以防止这种闪烁吗？ 疯狂的缓存 header 什么的？

Answer 1

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

1. 让 javascript 筛选并删除多余的定义，然后再将其加载到页面中(我认为这无疑是一项相当困难的任务，但并非不可能)。

2. 如果可以，请使用不同的字体名称定义原始实现。例如，原始字体可能定义为 My Arial，所以稍后当 Arial 时(我知道你不会为 Arial 使用 @font-face ，这只是一个例子)通过框架加载(两者都指向同一个文件进行定义)，闪烁不应该发生，因为页面实际上并没有尝试替换 My Arial 定义.这样做的问题是，如果在某个实例中您确实希望它覆盖，它不会。