Я ищу некоторые инструкции о том, как отлаживать, если мой файл шрифта выбирается, и если это так, что заставляет его не отображаться в сафари и firefox?
В сафари я имею получил следующий вывод
И в Chrome это выглядит так
Код, который устанавливает @ font-face ниже
import {createGlobalStyle } from 'styled-components';
import fontUrlTTF from './assets/SentyGoldenBell.ttf';
import fontUrlWOFF from './assets/SentyGoldenBell.woff';
export const GlobalStyles = createGlobalStyle`
@font-face {
font-family: 'SentyGoldenBell';
src: url(${fontUrlTTF}) format("truetype");
src: url(${fontUrlWOFF}) format("woff");
}
Несколько вещей, которые я рассмотрел
- Предположительно, сафари может не поддерживать ttf (теперь я включил файл woff )
- Операторы импорта правильно используют относительный путь по абсолютному пути
- Формат ttf () - это "trueetype", а не "ttf"
- Поскольку у меня установлен шрифт как локальный системный шрифт, chrome может использовать local (), поэтому я удалил этот
- . Я также рассмотрел, не применяется ли font-face из-за того, что он содержит китайские символы без указания диапазон unicode в объявлении font-face, но в изображении сафари даже engli sh charact У шрифта нет примененного шрифта.
- Я считаю, что веб-пакет правильно выбирает зависимость, поскольку каталог / build содержит скопированную версию файла шрифта.
- Принудительно обновляет веб-страницу на случай, если что-то связано с кешем
Я также заглянул в инспектор и вижу, что файл ttf существует, но отображается как внутри пакета? Означает ли это, что файл шрифта действительно был получен?
Потому что он входит в js пакетный вывод через веб-пакет, поэтому инспектор не обнаруживает, что файл шрифта был запрошен по сети?