Question

如果我使用推荐的所有内容 - 使用CDN附件＆＃34; Font Awesome＆＃34;每次闪烁＆＃34;页面加载＆＃34;。

into_iter

问如何防止闪烁？

Answer 1

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

http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.min.css - 保存路径＆＃34; css＆＃34;
http://fortawesome.github.io/Font-Awesome/assets/font-awesome/fonts/fontawesome-webfont.eot - 保存路径＆＃34;字体＆＃34;
http://fortawesome.github.io/Font-Awesome/assets/font-awesome/fonts/fontawesome-webfont.ttf - 保存路径＆＃34;字体＆＃34;
http://fortawesome.github.io/Font-Awesome/assets/font-awesome/fonts/fontawesome-webfont.woff2 - 保存路径＆＃34;字体＆＃34;
http://fortawesome.github.io/Font-Awesome/assets/font-awesome/fonts/fontawesome-webfont.woff - 保存路径＆＃34;字体＆＃34;
http://fortawesome.github.io/Font-Awesome/assets/font-awesome/fonts/fontawesome-webfont.svg - 保存路径＆＃34;字体＆＃34;

但即使比现在还要发生 - Chrome和Firefox也是如此。

因为那是字体类型＆＃34; woff2＆＃34;。我添加了新的webserver处理程序：

for #iis add

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

和#nginx添加（请参阅Mime type for WOFF fonts?）

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

Mozilla的Mime类型。

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

我希望这有助于某人。

Answer 2

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

<!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。解决了问题。

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

4 个答案: