Что может быть причиной того, что китайский шрифт отображается не в сафари и Mozilla, а в chrome? - PullRequest
0 голосов
/ 18 апреля 2020

Я ищу некоторые инструкции о том, как отлаживать, если мой файл шрифта выбирается, и если это так, что заставляет его не отображаться в сафари и firefox?

В сафари я имею получил следующий вывод enter image description here

И в Chrome это выглядит так enter image description here

Код, который устанавливает @ 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");
    }

Несколько вещей, которые я рассмотрел

  1. Предположительно, сафари может не поддерживать ttf (теперь я включил файл woff )
  2. Операторы импорта правильно используют относительный путь по абсолютному пути
  3. Формат ttf () - это "trueetype", а не "ttf"
  4. Поскольку у меня установлен шрифт как локальный системный шрифт, chrome может использовать local (), поэтому я удалил этот
  5. . Я также рассмотрел, не применяется ли font-face из-за того, что он содержит китайские символы без указания диапазон unicode в объявлении font-face, но в изображении сафари даже engli sh charact У шрифта нет примененного шрифта.
  6. Я считаю, что веб-пакет правильно выбирает зависимость, поскольку каталог / build содержит скопированную версию файла шрифта.
  7. Принудительно обновляет веб-страницу на случай, если что-то связано с кешем

Я также заглянул в инспектор и вижу, что файл ttf существует, но отображается как внутри пакета? Означает ли это, что файл шрифта действительно был получен? enter image description here

Потому что он входит в js пакетный вывод через веб-пакет, поэтому инспектор не обнаруживает, что файл шрифта был запрошен по сети? enter image description here

...