【问题标题】: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】:

    我的解决方案是直接在&lt;head&gt;标签中添加@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】:

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

      但即便如此 - 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
      猜你喜欢
      • 1970-01-01
      • 2014-01-16
      • 2017-04-14
      • 1970-01-01
      • 2013-12-07
      • 2017-05-02
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多