css - Chrome 字体总是待处理

Question

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

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

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

我尝试回收我的 IIS、重新启动我的 PC、切换应用程序池……一切都没有结果

Chrome:版本 53.0.2767.5 dev-m(64 位)

Answer 1

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

首先:拥有您想要使用的字体，如果您没有，google fonts 是查找和下载一些字体的好地方。

第二:转到here is the website (fontsquirrel)然后转到生成器，标记选项专家以在您的下载中进行一些更改，标记两个选项:EOT Lite和SVG部分: Font Formats:，往下，勾选Agreement:，然后下载你的字体。

第三:等待几秒钟后，当您的字体准备就绪时，将内容提取到一个文件中，它会像这样:

• 标本文件
• 样式表.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
----- 样式
---------- 样式.css
-----Index.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 的解释:

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

----- 字体
---------- 文件什么都有所有文件(你从中取出一些文件的那个)
----- 图片
---------- 本站所有图片
----- 杰斯
---------- js.js
----- 样式
---------- 样式.css
-----Index.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 并像类一样调用以放入任何地方。

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