Почему шрифт веб-сайта сжимается в мобильных браузерах на основе Chromium и как это исправить?

Question

Я использую Coolvetica Regular для своих заголовков. Он нормально работает в разных браузерах на моем P C, но на мобильных он выглядит странно в каждом мобильном браузере, основанном на Chromium (Chrome, Edge, Kiwi).

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

Что мне делать, чтобы исправить эту проблему? Есть ли способ добавить межбуквенный интервал только в мобильные браузеры на основе Chromium?

Chrome, Edge, Kiwi, Firefox на мобильном телефоне

Answer 1

Это лучшее решение, которое я мог придумать. Я видел этот вопрос на StackOverflow и пытался реализовать его для своего собственного сценария. На настольном компьютере он работал правильно и мог различать Chrome и Firefox, но на мобильном телефоне он не различал Firefox и другие браузеры на основе Chromium.

В целом я доволен результатом, и я не думаю, что эта проблема стоит времени и усилий, как предложил @Rene в комментарии выше.

Вот что я добавил в конце моего CSS, чтобы исправить эту проблему:

h1, h2 {letter-spacing: 0;}
@media screen and (max-width: 480px) { 
  .selector:not(*:root), h1, h2 {
    letter-spacing: 0.04em;
  }
}

Answer 2

Я предполагаю, что вы имеете в виду шрифт. Обратите внимание, что не все браузеры созданы одинаково. Если вам нужна согласованность между браузерами, я мог бы предложить использовать более простой шрифт, такой как без засечек. На мой взгляд, шрифты не слишком сильно различаются, чтобы вызывать беспокойство. Помните, что первый шрифт в кавычках - это то, что браузер попытается отобразить первым. Если не может, он перейдет ко второму варианту. Chrome и Edge, вероятно, самые универсальные браузеры.