CSS @ font-face не загружает файл шрифта. Но путь к файлу правильный (я могу его получить) - PullRequest
Новая
       17

CSS @ font-face не загружает файл шрифта. Но путь к файлу правильный (я могу его получить)

0 голосов
/ 23 мая 2019

У меня есть немного CSS с @font-face в нем: 

<style>
@font-face {
  src: url('file:///Users/trusktr/src/my-project/node_modules/my-lib/dist/assets/fonts/AvenirNext/AvenirNext-DemiBold.woff') format('woff');
  src: url('file:///Users/trusktr/src/my-project/node_modules/my-lib/dist/assets/fonts/AvenirNext/AvenirNext-DemiBold.svg') format('svg');
  src: url('file:///Users/trusktr/src/my-project/node_modules/my-lib/dist/assets/fonts/AvenirNext/AvenirNext-DemiBold.truetype') format('truetype');
  font-family: AvenirNext;
  src: url('file:///Users/trusktr/src/my-project/node_modules/my-lib/dist/assets/fonts/AvenirNext/AvenirNext-DemiBold.eot');
  font-style: normal;
}
* {
  background: red;
}
.App-root-1 {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>

Когда я проверяю вкладку сети, я не вижу никаких запросов для этих файлов шрифтов.

Однако, если я создаю fetch() вызов с использованием одного из них, я вижу вывод в консоли: 

fetch('file:///Users/trusktr/src/my-project/node_modules/my-lib/dist/assets/fonts/AvenirNext/AvenirNext-DemiBold.svg').then(r => r.text()).then(console.log)

и я вижу что-то вроде 

<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd" > <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
<defs >
<font id="AvenirNext-Heavy" ...>
...

Так что мне интересно, если я не вижу запрос файла шрифта на вкладке Сеть, значит ли это, что он не загружается? И если он не загружается, то почему бы и нет? Я что-то не так сделал в правиле @font-face? 1015 *

1 Ответ

0 голосов
/ 23 мая 2019

Мне удалось заставить его работать, поместив url() s в одно свойство src: 

@font-face {
  src: url('file:///Users/trusktr/src/my-project/node_modules/my-lib/dist/assets/fonts/AvenirNext/AvenirNext-DemiBold.eot'),
    url('file:///Users/trusktr/src/my-project/node_modules/my-lib/dist/assets/fonts/AvenirNext/AvenirNext-DemiBold.woff') format('woff'),
    url('file:///Users/trusktr/src/my-project/node_modules/my-lib/dist/assets/fonts/AvenirNext/AvenirNext-DemiBold.svg') format('svg'),
    url('file:///Users/trusktr/src/my-project/node_modules/my-lib/dist/assets/fonts/AvenirNext/AvenirNext-DemiBold.truetype') format('truetype');
  font-family: AvenirNext;
  font-style: normal;
}
...