Chrome 字体始终处于待处理状态答案

【问题标题】：Chrome fonts always pendingChrome 字体始终处于待处理状态
【发布时间】：2016-06-22 07:38:45
【问题描述】：

我遇到了一件奇怪的事情，即使我从该位置删除字体，我的应用程序的字体突然总是处于“待处理”状态。

最大的问题是我使用 browserSync，所以当我更改某些内容时，页面会重新加载，但由于字体请求仍然处于活动状态。在完成之前它不会加载它。所以我得到一个空页面

在 Firefox / IE 上，这不是问题。

我尝试回收我的 IIS，重新启动我的电脑，切换应用程序池，... 都没有结果

Chrome：版本 53.0.2767.5 dev-m（64 位）

【问题讨论】：

BrowserSync 使用 Gulp 构建？
@randy 是的，它是通过 gulp 构建
发现有人在使用广告拦截器时遇到问题，如果可行，您可以try。
这样就解决了，现在只有 woff2 低谷了
这里有同样的问题。我们有大约 30 种待处理的字体，大部分来自 Google，但也有很多来自我们自己的 CDN。这仅发生在 Chrome Canary (53.0.2782.0 canary) 中，而不发生在标准 Chrome 或其他浏览器中。我们已尝试禁用广告拦截器，但无济于事。也发生在金丝雀隐身中。另外值得一提的是，我们发现这一点是因为一些用户在他们当前的（非金丝雀）chrome 浏览器上遇到了这个问题，并且阻止了页面加载。清除缓存和 cookie 解决了这个问题，但在 Canary 中仍然是一个问题。

标签： css google-chrome fonts

【解决方案1】：

我不知道你的情况出了什么问题，但是，我将展示我如何加载字体，希望这会有所帮助。

第一：有你想使用的字体，如果你没有，谷歌字体是一个很棒的地方来查看和下载一些字体。

第二：转到here is the website (fontsquirrel)并转到生成器，标记选项专家以对您的下载进行一些更改，标记两个选项：EOT Lite 和 SVG 部分：字体格式：，向下，并标记选项协议：，然后下载您的字体.

第三次：等待几秒钟后，当您的字体准备就绪时，将内容提取到一个文件中，它将如下所示：

标本文件
样式表.css
生成器配置
Font-you-download.eot
Font-you-download.woff
Font-you-download.woff2
您下载的 HTML 字体演示
Font-you-download.svg
您下载的字体（您安装在设备中的字体）

现在，如果需要，删除这些文件，

生成器配置
标本文件
您下载的 HTML 字体演示

五：复制粘贴包含你项目中font-squirrel下载的所有文件的文件，

在 Stylesheet.css 中，它或多或少看起来像这样：

@font-face {
    font-family: 'open_sanslight_italic';
    src: url('opensans-lightitalic-webfont.eot');
    src: url('opensans-lightitalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('opensans-lightitalic-webfont.woff2') format('woff2'),
         url('opensans-lightitalic-webfont.woff') format('woff'),
         url('opensans-lightitalic-webfont.svg#open_sanslight_italic') format('svg');
    font-weight: normal;
    font-style: normal;

}

六：这里是我的示例存档文件的地图，以更好地理解：

-2017 年项目
----- 字体
---------- 包含所有文件的文件（您从中获取一些文件的文件）
----- 图片
---------- 网站所有图片
----- js
---------- js.js
----- 样式
---------- Styles.css
-----索引.html

七：把你的字体文件的位置，如下图所示：

@font-face {
font-family: 'open_sanslight_italic';
src: url('../fonts/opensans-light/opensans-lightitalic-webfont.eot');
src: url('../fonts/opensans-light/opensans-lightitalic-webfont.eot?#iefix') format('embedded-opentype'),
     url('../fonts/opensans-light/opensans-lightitalic-webfont.woff2') format('woff2'),
     url('../fonts/opensans-light/opensans-lightitalic-webfont.woff') format('woff'),
     url('../fonts/opensans-light/opensans-lightitalic-webfont.svg#open_sanslight_italic') format('svg');
font-weight: normal;
font-style: normal;

}

现在是 url 的解释：

({"../"} 转到这个 estruture:),

----- 字体
---------- 包含所有文件的文件（您从中获取一些文件的文件）
----- 图片
---------- 网站所有图片
----- js
---------- js.js
----- 样式
---------- Styles.css
-----索引.html

({"fonts"} 去哪里你的字体文件),

({"opensans-light"} 这是我为示例下载的文件，里面有你在 font-squirrel 中下载的所有文件);

此时您已经安装了字体，但随后您问我：我如何将她放入 HTML 中？，您有 2 个选项来使用该字体，一个是复制 font-familly 行在我的例子中是这样的：

font-family: 'open_sanslight_italic';

在类中设置如下：

.opn-itc{
 font-family: 'open_sanslight_italic';
}

**Or**

body{
 font-family: 'open_sanslight_italic';
}

在完成本教程之后，您已成功选择字体、修改字体、放入您的 css 并像一个类一样调用以放入任何地方。

对不起，如果这个教程有点长或复杂，一开始我还以为是狗吮吸漫画，但只是重复这个过程几次，你开始不假思索地开始做，在自动模式下，如果你需要帮助打电话我。

【讨论】：