Webfont не развертывается в приложении create-реагировать - PullRequest
Новая
       44

Webfont не развертывается в приложении create-реагировать

1 голос
/ 27 сентября 2019

Возникают проблемы с использованием веб-шрифта в CRA, в режиме разработки он загружается так:

Шрифт загружен

Но при развертывании в рабочем режиме он неказалось, не загружен вообще.Есть идеи, ребята?Вот мой css 

    @font-face {
      font-family: 'Noto Sans';
      src: local('Noto Sans KR'), url(./fonts/NotoSansKR-Black.otf) format('opentype');
      font-weight: 900;
    }

    @font-face {
      font-family: 'Noto Sans';
      src: local('Noto Sans KR'), url(./fonts/NotoSansKR-Bold.otf) format('opentype');
      font-weight: 700;
    }

Ответы [ 2 ]

0 голосов
/ 27 сентября 2019

Это рекомендуемый вариант.Это гарантирует, что ваши шрифты проходят через конвейер сборки, получают хэши во время компиляции, чтобы кэширование в браузере работало правильно, и чтобы вы получали ошибки компиляции, если файлы отсутствуют.

Как описано в разделе «Добавление изображений, шрифтов и файлов»”, Вам нужно импортировать файл CSS из JS.Например, по умолчанию src / index.js импортирует src / index.css:

import './index.css';Подобный CSS-файл проходит через конвейер сборки и может ссылаться на шрифты и изображения.Например, если вы поместите шрифт в src / fonts / MyFont.woff, ваш index.css может включать в себя следующее: 

@font-face {
  font-family: 'MyFont';
  src: local('MyFont'), url(./fonts/MyFont.woff) format('woff');
}

Обратите внимание, как мы используем относительный путь, начинающийся с ./.Это специальная запись, которая помогает конвейеру сборки (на основе Webpack) обнаружить этот файл.Ответили здесь: Как добавить шрифты в проекты на основе create-реагировать на приложения?

0 голосов
/ 27 сентября 2019

Во время производства ваши шрифты упаковываются как URI base64. Если у вас включено разделение кода, вы можете увидеть их в списке блоков с другим хэшированным именем.

...