浏览器不会对每个网络字体发出请求，尽管它们都在 CSS

Question

我正在为 Jekyll 使用 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; }

GETting /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/ and the code revision this corresponds to: https://github.com/coaxial/hello/tree/e16a1580af9396c8cf2cfafa4944edb86982180a

Answer 1

我会检查服务器或浏览器上的缓存，因为这似乎按预期工作。

Answer 2

我点击了这个link：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>

编码愉快！

浏览器不会对每个网络字体发出请求，尽管它们都在 CSS

The browser won't make a request for every webfont although they're all in the CSS

html

css

jekyll

webfonts