Несоответствия рендеринга шрифтов в браузере - PullRequest
0 голосов
/ 05 декабря 2018

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

Вот код, первая кнопка - это пользовательский шрифт, а вторая - arial:

<div>
        ITC Franklin Gothic Demi Compressed-> 
        <button style="padding:0 !important; margin: 0 !important;">start</button>
        <button style="padding:0 !important; margin: 0 !important; font-family: arial;">start</button> 
        <- arial
</div>

Я удалил все отступы и поля, которые отображаются должным образом для Chrome - рабочий стол.

Chrome - Рабочий стол

Но не в Chrome на моем телефоне Android.

Chrome - для мобильных устройств (для настольных ПК)

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

Что может бытьпроблема?

В крайнем случае, я мог бы по-разному стилизовать их с помощью медиа-запросов CSS.Меня беспокоит этот подход - устройства с более высоким разрешением, которые могут запускать стили рабочего стола и возвращаться к исходной проблеме.

Любая помощь с этим будет принята с благодарностью.

Ответы [ 2 ]

0 голосов
/ 12 декабря 2018

Я нашел проблему.Присланные мне шрифты не были веб-шрифтами.После применения веб-шрифтов они последовательно отображались на разных устройствах.

0 голосов
/ 05 декабря 2018

Я не могу ответить на вопрос из личного опыта, но быстрый Google дал мне этот вопрос и ответ на форуме.Решение вращается вокруг использования свойства line-height.

https://www.sitepoint.com/community/t/desktop-vs-tablet-android-chrome-big-line-height-difference-i-think-related-to-high-density-screens/247286

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...