Правильный способ включить новый шрифт и ссылаться на него?

Question

В файловой структуре ReactQL есть рекомендуемое место для хранения пользовательского шрифта, и как бы вы ссылались на этот шрифт?

Например, я попытался добавить шрифт в./static и сослаться на него в styles.global.css, но не повезло.

Любые рекомендации?

Answer 1

Вы можете ссылаться на шрифты (или изображения) тремя способами:

1. Из вашего кода JS

Вы можете импортировать шрифт /img, как и любой другой код, используя синтаксис модуля ES6:

// imports will start looking in your project root
image someFont from 'src/fonts/whatever.ttf'; // someFont = public path to font

В этом случае, someFont будет равняться строке пути к файлу шрифта, которая обрабатывается Webpack и выводится в результате dist папка. Это делается для вас автоматически; вам не нужно помещать шрифты или изображения где-нибудь особенное.

Затем вы можете ссылаться на это в ваших компонентах React везде, где вам обычно требуется полный путь к файлу; строка будет общедоступна с веб-сервера ReactQL:

// The regular, pre-processed PNG image
import logoImage from 'src/images/logo.png';

// A component that uses the image
const ShowLogo = () => (
   <img src={logoImage} />
);

В этом случае, logoImage может закончиться как /assets/img/logo.d41d8cd98f00b204e980.png после того, как Webpack обработал его и сбросил константу в результирующий пакет Javascript.

По договоренности я рекомендую вам хранить статические ресурсы в той же папке, что и вызывающий компонент React. Если у вас есть несколько компонентов, указывающих на одни и те же активы, просто выберите разумное имя - например, src/fonts/ или же src/imagesили даже просто /images,

2. Изнутри вашего CSS

Внутри любого .css|sass|scss|less| или же *.global. версии же, вы можете импортировать, используя обычные @import синтаксис:

styles.global.css

@font-face {
    font-family: 'Starjout';
    src: url('./Starjout.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

html {
  padding: 0;
  border: 0;
  font-family: 'Starjout';
  font-size: 16px;
}

Чтобы убедиться, что шрифт разрешен правильно, импортируйте его относительно CSS-файла. В этом случае, Starjout.ttf находится в той же папке, что и styles.global.css,

3. Внутри/static

Все, что вы положили в /static будет размещен в результате dist/public папка как есть. Он не будет обрабатываться Webpack- это означает, что изображения не будут сжаты в процессе производства и не будут .gz или же .br версии будут созданы. Они просто будут скопированы.

Чтобы сослаться на файл, вы можете использовать полный URL внутри вашего CSS. Если вы используете относительный путь, Webpack будет ожидать найти файл относительно исходного CSS, и он не будет работать. Аналогично, положить вещи в /static означает, что файл будет скопирован в исходном виде, поэтому импорт через JS также не будет работать должным образом.

Основное правило: любой статический файл, который вы хотите считать "исходным", вставьте в src/ или где-нибудь еще в вашем проекте маршрута. Все, что вы хотите скопировать без обработки или возможности динамического импорта, поместите в /static