如何解决闪烁的 Font Awesome 图标？

Question

如果我使用到处推荐的东西 - 每次闪烁时都使用 CDN 附件作为“Font Awesome”"on page load"。

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

Q如何防止闪烁？

Answer 1

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

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 - 保存在路径 "fonts"
http://fortawesome.github.io/Font-Awesome/assets/font-awesome/fonts/fontawesome-webfont.ttf - 保存在路径 "fonts"
http://fortawesome.github.io/Font-Awesome/assets/font-awesome/fonts/fontawesome-webfont.woff2 - 保存在路径 "fonts"
http://fortawesome.github.io/Font-Awesome/assets/font-awesome/fonts/fontawesome-webfont.woff - 保存在路径 "fonts"
http://fortawesome.github.io/Font-Awesome/assets/font-awesome/fonts/fontawesome-webfont.svg - 保存在路径 "fonts"

但仍然发生了 - Chrome 和 Firefox。

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

对于#iis 添加

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

和 #nginx add (see how Mime type for WOFF fonts?)

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

Mozilla.

的 Mime 类型

现在字体图标加载速度与图片一样快。

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

Answer 2

我的解决方案是直接在 <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">

这是 Google 在 Youtube 和其他网站上所做的

Answer 3

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

Answer 4

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

如何解决闪烁的 Font Awesome 图标？

How solve flickering Font Awesome Icons?

css

fonts

font-awesome

cdn

webfonts