html - 尽管它们都在 CSS 中，但浏览器不会对每个 webfont 发出请求

Question

我正在使用 midnight theme对于杰基尔。 Jekyll 目前是 v3.7.4

我的主题是指捆绑的 OpenSans webfont，我还添加了 FontAwesome。但是浏览器只会请求 OpenSans 字体，而不会请求 FontAwesome 文件。

在我的页面的头部(编译):

  <!-- theme -->
  <link rel="stylesheet" href="/assets/css/style.css?v=e16a158">
  <!-- theme overrides -->
  <link rel="stylesheet" href="/assets/css/hello.css?v=e16a158">

未编译:

  <!-- theme -->
  <link rel="stylesheet" href="{{ '/assets/css/style.css?v=' | append: site.data['hash'] | relative_url }}">
  <!-- theme overrides -->
  <link rel="stylesheet" href="{{ '/assets/css/hello.css?v=' | append: site.data['hash'] | relative_url }}">

hello.scss是我自定义样式的地方。前两行是这些根据 FontAwesome instructions :

---
---
@import "./vendor/fontawesome/fontawesome.scss";
@import "./vendor/fontawesome/brands.scss";

编译后的 CSS(服务于 /assets/css)包括:

@charset "UTF-8";
/*!
 * Font Awesome Free 5.13.0 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 */

@font-face {
  font-family: 'Font Awesome 5 Brands';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("../fonts/fa-brands-400.eot");
  src: url("../fonts/fa-brands-400.eot?#iefix") format("embedded-opentype"), url("../fonts/fa-brands-400.woff2") format("woff2"), url("../fonts/fa-brands-400.woff") format("woff"), url("../fonts/fa-brands-400.ttf") format("truetype"), url("../fonts/fa-brands-400.svg#fontawesome") format("svg"); }
.fab {
  font-family: 'Font Awesome 5 Brands';
  font-weight: 400; }

正在获取 /assets/fonts/fa-brands-400.woff作品:

$ http :8888/assets/fonts/fa-brands-400.woff
HTTP/1.1 200 OK
cache-control: private, max-age=0, proxy-revalidate, no-store, no-cache, must-revalidate
connection: close
content-length: 89824
content-type: application/font-woff; charset=utf-8
date: Sun, 19 Apr 2020 08:26:19 GMT
etag: 3011a2-15ee0-5e9b582b
last-modified: Sat, 18 Apr 2020 19:42:35 GMT
server: WEBrick/1.4.2 (Ruby/2.6.2/2019-03-13)



+-----------------------------------------+
| NOTE: binary data not shown in terminal |
+-----------------------------------------+

然而，当我在任何浏览器中访问该站点时(尝试过 Firefox、Linux 上的 Chrome 和 iOS 上的 Safari)，它甚至不会尝试请求 FontAwesome 字体文件:



有趣的是，OpenSans 字体文件在编译的 CSS 中是这样引用的，浏览器可以启动请求:

@font-face {
  font-family: 'OpenSansLight';
  src: url("../fonts/OpenSans-Light-webfont.eot");
  src: url("../fonts/OpenSans-Light-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/OpenSans-Light-webfont.woff") format("woff"), url("../fonts/OpenSans-Light-webfont.ttf") format("truetype"), url("../fonts/OpenSans-Light-webfont.svg#OpenSansLight") format("svg");
  font-weight: normal;
  font-style: normal; }
@font-face {
  font-family: 'OpenSansLightItalic';
  src: url("../fonts/OpenSans-LightItalic-webfont.eot");
  src: url("../fonts/OpenSans-LightItalic-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/OpenSans-LightItalic-webfont.woff") format("woff"), url("../fonts/OpenSans-LightItalic-webfont.ttf") format("truetype"), url("../fonts/OpenSans-LightItalic-webfont.svg#OpenSansLightItalic") format("svg");
  font-weight: normal;
  font-style: normal; }
@font-face {
  font-family: 'OpenSansRegular';
  src: url("../fonts/OpenSans-Regular-webfont.eot");
  src: url("../fonts/OpenSans-Regular-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/OpenSans-Regular-webfont.woff") format("woff"), url("../fonts/OpenSans-Regular-webfont.ttf") format("truetype"), url("../fonts/OpenSans-Regular-webfont.svg#OpenSansRegular") format("svg");
  font-weight: normal;
  font-style: normal;
  -webkit-font-smoothing: antialiased; }
@font-face {
  font-family: 'OpenSansItalic';
  src: url("../fonts/OpenSans-Italic-webfont.eot");
  src: url("../fonts/OpenSans-Italic-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/OpenSans-Italic-webfont.woff") format("woff"), url("../fonts/OpenSans-Italic-webfont.ttf") format("truetype"), url("../fonts/OpenSans-Italic-webfont.svg#OpenSansItalic") format("svg");
  font-weight: normal;
  font-style: normal;
  -webkit-font-smoothing: antialiased; }
@font-face {
  font-family: 'OpenSansSemibold';
  src: url("../fonts/OpenSans-Semibold-webfont.eot");
  src: url("../fonts/OpenSans-Semibold-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/OpenSans-Semibold-webfont.woff") format("woff"), url("../fonts/OpenSans-Semibold-webfont.ttf") format("truetype"), url("../fonts/OpenSans-Semibold-webfont.svg#OpenSansSemibold") format("svg");
  font-weight: normal;
  font-style: normal;
  -webkit-font-smoothing: antialiased; }
@font-face {
  font-family: 'OpenSansSemiboldItalic';
  src: url("../fonts/OpenSans-SemiboldItalic-webfont.eot");
  src: url("../fonts/OpenSans-SemiboldItalic-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/OpenSans-SemiboldItalic-webfont.woff") format("woff"), url("../fonts/OpenSans-SemiboldItalic-webfont.ttf") format("truetype"), url("../fonts/OpenSans-SemiboldItalic-webfont.svg#OpenSansSemiboldItalic") format("svg");
  font-weight: normal;
  font-style: normal;
  -webkit-font-smoothing: antialiased; }
@font-face {
  font-family: 'OpenSansBold';
  src: url("../fonts/OpenSans-Bold-webfont.eot");
  src: url("../fonts/OpenSans-Bold-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/OpenSans-Bold-webfont.woff") format("woff"), url("../fonts/OpenSans-Bold-webfont.ttf") format("truetype"), url("../fonts/OpenSans-Bold-webfont.svg#OpenSansBold") format("svg");
  font-weight: normal;
  font-style: normal;
  -webkit-font-smoothing: antialiased; }
@font-face {
  font-family: 'OpenSansBoldItalic';
  src: url("../fonts/OpenSans-BoldItalic-webfont.eot");
  src: url("../fonts/OpenSans-BoldItalic-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/OpenSans-BoldItalic-webfont.woff") format("woff"), url("../fonts/OpenSans-BoldItalic-webfont.ttf") format("truetype"), url("../fonts/OpenSans-BoldItalic-webfont.svg#OpenSansBoldItalic") format("svg");
  font-weight: normal;
  font-style: normal;
  -webkit-font-smoothing: antialiased; }

_config.yml :

# Site config
defaults:
  -
    scope:
      path: "" # empty string means everywhere
      type: "pages"
    values:
      layout: "default"

author: "64b.it"
title: "64b.it | custom-built software"
description: "We deliver custom-built software to maximize your business' ROI."
repo: "https://github.com/coaxial/hello"
# Jekyll config
theme: jekyll-theme-midnight
markdown: kramdown
include:
  - assets/vendor/fontawesome
exclude:
  - Gemfile
  - Gemfile.lock

到底是怎么回事？当 OpenSans 工作正常时，为什么我不能让浏览器甚至请求 FontAwesome 字体文件？

如果需要更多详细信息，您可以查看此 Netlify 部署: https://5e9c012d3f93e40006beb655--hello-64bit.netlify.app/以及对应的代码修订版: https://github.com/coaxial/hello/tree/e16a1580af9396c8cf2cfafa4944edb86982180a

Answer 1

我点击了这个链接:https://5e9c012d3f93e40006beb655--hello-64bit.netlify.app/

您的 HTML(第 71 行)内容如下:

<i class="fa fa-twitter"></i>

您的 hello.css(已解析，第 4512 行)内容如下:

.fab {
  font-family:'Font Awesome 5 Brands';
  font-weight:400
} 

显然，您需要将第 71 行更改为:

<i class="fab fa-twitter"></i>

快乐编码!