Загадочное межбуквенное расстояние. Куда копать, как чинить?

Question

[Arris]

Поднял бложик на HEXO, тема Freemind.

Периодически читатели жалуются вот на такую странную штуку:


Проявляется не всегда и не во всех браузерах. Грешил на мобильные браузеры - нет, в некоторых мобильных браузерах проявляется, в некоторых нет. На компе та же история - у меня ни в одном браузере нет такой хрени, а у приятеля на всех его браузерах есть. У третьего человека в мобильных браузерах всё ок, а на ноуте - проблема наблюдается.

Грешил на letter-spacing, но в стилях (и в инспекторе)
letter-spacing: normal;

Грешил на фонты (тема к HEXO сделана китайцем) - стилях встречается загадочное определение:

font-family: 'PT Sans Narrow', '雅黑', '文泉驿微米黑', '黑体', sans-serif;

Шрифт подключается так:

@font-face {
  font-family: 'PT Sans Narrow';
  font-style: normal;
  font-weight: 400;
  src: local('PT Sans Narrow'), local('PTSans-Narrow'), url('../fonts/google-fonts/UyYrYy3ltEffJV9QueSi4RdbPw3QSf9R-kE0EsQUn2A.woff') format('woff');
}

Файл .woff разумеется существует, разумеется, штатно аплоадится на хостинг... если бы он не загружался штатно - проблемы были бы у всех, верно?

Куда копать, как чинить?

Comments

[iBird Rose]

шрифт не грузится. у тех у кого шрифт уже есть на компе - отображается правильно. у тех, у кого шрифта нет - такая проблема.

Answer 1

[ⓒⓢⓢ]

Без ссылки на сайт, на первый взгляд:

Периодически читатели жалуются вот на такую странную штуку:

Шрифт "PT Sans Narrow" не доступен для браузера и браузер пытается использовать следующий шрифт по цепочке в порядке следования это будут "'雅黑', '文泉驿微米黑', '黑体', sans-serif;"
На русских версиях ОС начертания русских глифов в китайских шрифтах может и не быть, как пример:

на скрине в одном текстовое поле, две строки текста
Русские символы отрендерились с паддингом, а английские нет - разность начертания шрифта

Из-за чего шрифт может быть не доступен?
Браузер пытается найти исходник шрифта, например, смотрит на:
1. local('PT Sans Narrow') - Но такого локального шрифта нет
2. local('PTSans-Narrow') - Такого локально тоже нет
Локальных копий нет, пытается найти на сервере:
url('../fonts/google-fonts/UyYrYy3ltEffJV9QueSi4RdbPw3QSf9R-kE0EsQUn2A.woff') format('woff');
И тут может быть ошибка:
Сервер не отдаёт шрифт - По урл пути нет шрифта, шрифт не поддерживается браузером и т.д.
Смотрите почему шрифт не доступен шрифт для браузера

Совет:
Если нет острой необходимости, то уберите китайский шрифты из списка. В случае проблем со шрифтами будут рендериться стандартные шрифты с нормальным очертанием (без паддинга)

Дополню ответ на вопрос "Почему не у всех?":
Шрифт доступен в интернете "PT Sans Narrow" и браузер пользователя на другом сайте уже когда то загружал этот шрифт к себе в локальный кеш. Поэтому может его использовать брать локальную копию (см. блок как браузер будет искать этот шрифт)

Comments

[Arris]

сайт в профиле ;-)

Answer 2

[Вадим Кот]

woff не поддерживается IE8- и opera mini. Счаcтливые обладатели этих браузеров и жалуются.
Google любезно со всеми делится, какие форматы и для каких браузеров нужны https://developers.google.com/web/fundamentals/per...
В chrome dev tools стили выглядят так:

font-family: 'PT Sans Narrow', '雅黑', '文泉驿微米黑', '黑体', sans-serif;

уберите ненужное из font-family

Comments

[ⓒⓢⓢ]

у меня ни в одном браузере нет такой хрени, а у приятеля на всех его браузерах есть

Если правильно понял ТС, тут скорее всего не в поддержке шрифта дело...

[Вадим Кот]

JRK_DV, Точнее было бы сказать, что проблема в поддержке браузерами и в font-family, для которого напрашивается исправление на font-family: 'PT Sans Narrow', sans-serif;

[Arris]

Буду уточнять, какие там браузеры и у кого. Сложно собрать фидбек - не все мои друзья умеют консолью браузера пользоваться :(

Answer 3

[monochromer]

Нужно убедиться, что в файле шрифта есть поддержка нужных языков.
Ее лучше включить в сервисе Google Fonts:

А пользователям не давать искать и использовать локальную версию шрифта, так как она может быть с поддержкой только одного языка (старый прием со смайликом src: local('☺')).

Comments

[Arris]

Впервые слышу про этот приём. Можно поподробнее?