Использование @ font-face приводит к тексту, имеющему высоту 0 на Mac - PullRequest
Новая
       11

Использование @ font-face приводит к тексту, имеющему высоту 0 на Mac

0 голосов
/ 21 января 2019

У меня есть сайт с нестандартным шрифтом (Gotham Book).Все контейнеры, подобные этому: 

<span>TEXT IN GOTHAM </span>

Получите высоту 0 на Mac (Chrome и Safari, а не в Chrome для Win).Одни и те же контейнеры прекрасно работают с другими шрифтами, такими как Arial, Roboto и т. Д.

Шрифт в CSS выглядит следующим образом: 

@font-face {
  font-family: 'Gotham Book';
  src: url("/assets/fonts/GothamBook.ttf")
}

Нужно ли указывать что-то еще?

1 Ответ

0 голосов
/ 21 января 2019

Я думаю, что ваш шрифт по какой-то причине не загружался, и вам нужно отладить его на Mac (вам следует проверить консоль на наличие ошибок)

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

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

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

font-family: 'MyWebFont', Arial, sans-serif;
...