Браузер не будет запрашивать каждый веб-шрифт, хотя они все в CSS - PullRequest
Новая
       35

Браузер не будет запрашивать каждый веб-шрифт, хотя они все в CSS

6 голосов
/ 19 апреля 2020

Я использую тему полночь для Джекила. Jekyll в настоящее время v3.7.4

Моя тема относится к прилагаемому веб-шрифту OpenSans, и я также добавил 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 : 

---
---
@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, Chrome на Linux и Safari на iOS), он не ' даже не пытайтесь сделать запрос на файлы шрифтов FontAwesome:

Firefox's network activity: no request for fa-brands-*

Интересно, что файлы шрифтов 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

Что происходит? Почему я не могу заставить браузер даже запрашивать файлы шрифтов FontAwesome, когда OpenSans работает нормально?

Вы можете использовать это развертывание Netlify, если вам нужна дополнительная информация: https://5e9c012d3f93e40006beb655--hello-64bit.netlify.app/ и редакция кода соответствует: https://github.com/coaxial/hello/tree/e16a1580af9396c8cf2cfafa4944edb86982180a

Ответы [ 2 ]

2 голосов
/ 25 апреля 2020

Я нажал на эту ссылку: https://5e9c012d3f93e40006beb655--hello-64bit.netlify.app/

Ваш HTML (строка 71) читает: 

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

И ваш привет. css ( разобран, строка 4512) читает: 

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

Очевидно, вам нужно изменить строку 71 на: 

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

Удачного кодирования!

0 голосов
/ 24 апреля 2020

Я бы проверил наличие кэширования на сервере или в браузере, так как похоже, что он работает должным образом.

...