Chrome字体始终待定

Question

我有这个奇怪的事情突然我的应用程序的字体总是'待定',即使我从该位置删除字体.

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

在Firefox/IE上,这不是问题.

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

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

Answer 1

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

第一： 拥有您想要使用的字体，如果您没有，谷歌字体是查看和下载一些字体的绝佳场所。

第二：转到这里是网站（fontsquirrel）并转到生成器，标记选项专家以在下载中进行一些更改，在“字体格式： ”部分中标记两个选项：EOT Lite和SVG，向下，然后标记选择协议：，然后下载您的字体。

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

• 样本文件
• 样式表.css
• 生成器配置
• 字体-you-download.eot
• 字体-you-download.woff
• 字体-you-download.woff2
• 您下载的 HTML 字体的演示
• 字体-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;

}

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

- Project-2017
----- 字体
---------- 包含所有文件的文件（您从中获取一些文件的文件）
----- Imgs
--------- - 网站所有图片
----- Js
---------- js.js
----- Styles
---------- Styles.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;

}

现在解释一下网址：

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

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

（{"fonts"} 转到您的字体文件的位置），

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

此时你已经安装了字体，但是你问我：我如何将她放入HTML中？，您有 2 个选项来使用该字体，一个是复制 font-family 行，在我的示例中如下所示：

font-family: 'open_sanslight_italic';

并在课堂上设置如下：

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

**Or**

body{
 font-family: 'open_sanslight_italic';
}

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

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