4

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

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

演示： http: //jsfiddle.net/Hg9Pc/ （Firefox；这种特殊情况在 Chrome 中运行良好）

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

4

1 回答 1

3

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

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

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

于 2012-03-06T12:13:22.450 回答