Блог

Главная - Вопросы по программированию - Шрифт отображается некорректно, используя @font-face

Шрифт отображается некорректно, используя @font-face

#css #fonts #font-face

#css #шрифты #шрифт-лицо

Вопрос:

Я пытаюсь использовать шрифт для веб-сайта. Файл шрифта загружается правильно (я вижу файл на вкладке «Моя сеть»), однако он отображается некорректно. Я использовал font-face для импорта шрифтов со следующими правилами оформления ниже,

 @font-face{
    font-family: 'BwGradual-Thin';
    src:    url('../fonts/BwGradual-Thin.otf') format('opentype'),
            url('../fonts/BwGradual-Thin.woff'),
            url('../fonts/BwGradual-Thin.eot'); 
}

@font-face{
    font-family: 'BwGradual-Regular';
    src:    url('../fonts/BwGradual-Regular.otf') format('opentype'),
            url('../fonts/BwGradual-Regular.woff'),
            url('../fonts/BwGradual-Regular.eot');
  }

Я прикрепил 2 скриншота ниже, первый из вкладки сети с правильно загруженным файлом шрифта, в котором показано, как все символы должны отображаться вместе со шрифтом. Второй снимок экрана показывает, как шрифт отображается на веб-сайте. Корректно отображается только символ ‘t’.

Инструменты разработки вкладка Сеть

Скриншот заголовка

Любая помощь была бы весьма признательна.

Комментарии:

1. Я не вижу проблем, и кажется, что он был применен правильно? Я предполагаю, что слово art находится внутри <strong> тега, выделяя его жирным шрифтом?

2. @JuliusGuevarra Если вы посмотрите на символ «r» и символ «W», они не совпадают с символами в файле шрифта.

3. Вы пытались использовать установленный шрифт в Photoshop, чтобы увидеть их разницу? Или попробуйте применить сглаживание шрифта в css -webkit-font-smoothing: antialiased;

4. @JuliusGuevarra Спасибо за вашу настойчивость. У меня есть файл эскиза, который предоставил мне графический дизайнер teams, где символы отображаются так, как определено в файле .otf. Я перепробовал все параметры -webkit-font-smoothing, однако на данный момент безуспешно.

Ответ №1:

Я все еще не уверен, почему описанный выше метод не работает, однако у меня есть шрифт для правильного отображения. Мои решения были;

  • Замените файлы .otf на .ttf (преобразованные с помощью CloudConvert)
  • В font face объявите все шрифты как одно и то же семейство, т.е. семейство шрифтов: ‘BwGradual’, а затем объявите вес шрифта каждого типа. т.е. 100,200,400 и т. Д
  • Set -webkit-сглаживание шрифтов: сглажено. (Это не сработало с типами файлов .otf.)

Очень конкретный вопрос, поэтому не уверен, полезно ли это для последующего использования, но надеюсь, что это поможет.