如何解决闪烁的字体真棒图标？答案

【问题标题】：How solve flickering Font Awesome Icons?如何解决闪烁的字体真棒图标？
【发布时间】：2016-08-10 21:33:44
【问题描述】：

如果我使用随处推荐的东西 - 每次在“页面加载时”闪烁时使用“Font Awesome”的 CDN 附件。

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />

Q如何防止闪烁？

【问题讨论】：

标签： css fonts font-awesome cdn webfonts

【解决方案1】：

我的解决方案是直接在<head>标签中添加@font-face：

<!DOCTYPE html>
<html lang="en">
  <head>
    <style name="FontAwesome">
        @font-face {
          font-family: 'FontAwesome';
          src: url('https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/fonts/fontawesome-webfont.eot');
          src: url('https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/fonts/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
               url('https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/fonts/fontawesome-webfont.woff2') format('woff2'),
               url('https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/fonts/fontawesome-webfont.woff') format('woff'),
               url('https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/fonts/fontawesome-webfont.ttf') format('truetype'),
               url('https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/fonts/fontawesome-webfont.svg?#fontawesomeregular') format('svg');
          font-weight: normal;
          font-style: normal;
        }
    </style>

    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css}" rel="stylesheet">

这就是谷歌在 Youtube 和其他网站上所做的事情

【讨论】：

我认为它使它更快，但仍然闪烁。

【解决方案2】：

我遇到了同样的问题，似乎我已经包含了两次 FontAwesome 样式表，删除其中一个后问题就消失了。

【讨论】：

【解决方案3】：

在我的解决方案中，我将字体资源下载到服务器

http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.min.css - 保存在路径“css”中
http://fortawesome.github.io/Font-Awesome/assets/font-awesome/fonts/fontawesome-webfont.eot - 保存在“字体”路径中
http://fortawesome.github.io/Font-Awesome/assets/font-awesome/fonts/fontawesome-webfont.ttf - 保存在路径“字体”中
http://fortawesome.github.io/Font-Awesome/assets/font-awesome/fonts/fontawesome-webfont.woff2 - 保存在“字体”路径中
http://fortawesome.github.io/Font-Awesome/assets/font-awesome/fonts/fontawesome-webfont.woff - 保存在路径“字体”中
http://fortawesome.github.io/Font-Awesome/assets/font-awesome/fonts/fontawesome-webfont.svg - 保存在路径“字体”中

但即便如此 - Chrome 和 Firefox 也是如此。

为此，有字体类型“woff2”。我添加了新的网络服务器处理程序：

为#iis添加

C:\Program Files\IIS Express\AppServer\applicationhost.config
<mimeMap fileExtension=".woff2" mimeType="font/woff2" />

对于#nginx添加（看看Mime type for WOFF fonts?如何）

/etc/nginx/mime.types || or /usr/local/nginx/conf/mime.types
font/woff2 woff2;

Mozilla 的 Mime 类型。

现在字体图标可以像图像一样快速加载。

我希望这对某人有所帮助。

【讨论】：

是的，因为您可以在共享主机上执行此操作。不好的答案。谁在乎 locahost
@Grasper 此解决方案适用于一个环境，而不是全部。我严格只在完全控制的系统上构建。
只有您可以访问它有什么用处？除非您有自己的服务器来托管您的网站。
@Grasper 如果你有什么有价值的或解决方案，请贡献。
我碰到了 svg 而不是使用字体图标，但它在 chrome 中也会闪烁。

【解决方案4】：

我从使用 Web 字体切换到 SVG。解决了问题。

【讨论】：

感谢解决方法-我认为这可能是相同的行为-本地 vs cdn