@ font-face работает только если шрифт установлен на локальном компьютере - PullRequest
Новая
       5

@ font-face работает только если шрифт установлен на локальном компьютере

0 голосов
/ 06 января 2020

Я пытаюсь использовать пользовательский шрифт, который недоступен через Google Fonts. Я распаковал шрифт и поместил его в src / assets / fonts моего проекта React.

В моем индексе. css Я загружаю шрифт как: 

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

Я протестировал приложение как на локальном хосте, так и размещенное в сети для тестирования, и оно работает нормально, так как шрифт устанавливается локально на моем компьютере, но если я открываю приложение на другом компьютере, оно не работает. Я также удалил шрифт со своего компьютера, и резервный шрифт начал показываться с тех пор. Что мне не хватает? Спасибо

Ответы [ 3 ]

0 голосов
/ 06 января 2020

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

0 голосов
/ 06 января 2020

Правильное имя шрифта Lemon/Milk, и вам нужно будет преобразовать его в другой формат, например WOFF WOFF2.

Пожалуйста, следуйте этому:

  1. Go этот веб-сайт бесплатный онлайн-генератор шрифтов
  2. Загрузите ваш шрифт и проверьте TTF, EOT, WOFF, WOFF2 (см. поддержка браузера )
  3. Нажмите «Преобразовать»> «Загрузить»
  4. . Загрузите только что преобразованные шрифты на свой сервер

Наконец, ваш CSS должен выглядеть примерно так. 

@font-face {
    font-family: 'Lemon/Milk';
    src: url('LemonMilkbold.eot');
    src: url('LemonMilkbold.eot?#iefix') format('embedded-opentype'),
        url('LemonMilkbold.woff2') format('woff2'),
        url('LemonMilkbold.woff') format('woff'),
        url('LemonMilkbold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

Обратите внимание , что вам нужно будет также преобразовать любой другой вес шрифта. и не забудьте добавить правильный path

0 голосов
/ 06 января 2020

Похоже, у вашего браузера проблема с пониманием файла шрифта. Попробуйте сделать пакет webfont из файла шрифтов. Для этого существует множество инструментов:

https://www.fontsquirrel.com/tools/webfont-generator

Пакет Webfont будет содержать шрифт во всех основных поддерживаемых форматах и ​​сгенерирует css @font директива для Вас.

ОТКАЗ ОТ ОТВЕТСТВЕННОСТИ: Убедитесь, что у вас есть права на использование шрифта.

...