Arris
@Arris
Сапиенсы учатся, играя.

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

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

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

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

Грешил на 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 разумеется существует, разумеется, штатно аплоадится на хостинг... если бы он не загружался штатно - проблемы были бы у всех, верно?

Куда копать, как чинить?
  • Вопрос задан
  • 261 просмотр
Решения вопроса 3
JRK_DV
@JRK_DV
Рецепты https://codepen.io/jrkdv/full/LKLXdq
Без ссылки на сайт, на первый взгляд:
Периодически читатели жалуются вот на такую странную штуку:

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

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

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

Дополню ответ на вопрос "Почему не у всех?":
Шрифт доступен в интернете "PT Sans Narrow" и браузер пользователя на другом сайте уже когда то загружал этот шрифт к себе в локальный кеш. Поэтому может его использовать брать локальную копию (см. блок как браузер будет искать этот шрифт)
Ответ написан
vadimkot
@vadimkot Куратор тега CSS
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
Ответ написан
monochromer
@monochromer
Нужно убедиться, что в файле шрифта есть поддержка нужных языков.
Ее лучше включить в сервисе Google Fonts:
c48ee8f814d94b109a809faf242f37d4.png
А пользователям не давать искать и использовать локальную версию шрифта, так как она может быть с поддержкой только одного языка (старый прием со смайликом src: local('☺')).
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы