Recommended Posts

Здравствуйте.
При выделении подключаемый шрифт на сайте рендерится по разному на macOS и Windows.
Браузер Chrome последней версии.
Вот так шрифт отображается на ОС Windows - идеально расположен по центру
Снимок экрана 2019-06-11 в 16.22.03.png

 

А вот так уже на macOS. Шрифт смещен с центра к верху.

Снимок экрана 2019-06-11 в 16.22.33.png

 

Сталкиваюсь не в первый раз с этой проблемой. В чем может быть проблема? Возможно кто-то сталкивался с подобным? В какую сторону копать в таком случае?

Edited by Temiks

Share this post


Link to post
Share on other sites

Здравствуйте 

А шрифт системный или кастомный?

Share this post


Link to post
Share on other sites

Шрифт кастомный, скачанный с Интернета. Называется 'Jikharev'.
В прошлый раз, когда сталкивался с подобным, был другой шрифт, но тогда решили шрифт заменить на похожий с google fonts.

Share this post


Link to post
Share on other sites

Если отталкиваться от сложного пути то следует начать с метрик шрифтов — Погружение в CSS: метрики шрифтов, line-height и vertical-align

Если посмотреть на разницу Ваших примеров то можно поспорить — какой из скринов "корректный"?

Дело в том, что в примере под Windows — присутствует "излишний" отступ сверху, над текстом. В то же время под macOS высота строки в точности от нижней границы символов до верхней. От сюда следует понимать "по-центру" — это субъективное мнение.

Разница в математических расчетах.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By vkapas
      Подключаю с Google Fonts Open Sans Condensed, но какому бы не элементу не присваивал, вместо него браузер всегда рендерит системный шрифт — Liberation Serif в Ubuntu и Times New Roman в Windows.
      Другие шрифты, Open Sans или Roboto, например, применяются исправно, а именно с Open Sans Condensed загвоздка. Подключаю так (на самом деле эту строку генерит шаблон Drupal, я только указываю название шрифта в настройках темы):
      <link type="text/css" rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans+Condensed" media="all"> В итоге:
       
       
      В чём может быть причина такого поведения?
    • By Frogg
      Здравствуйте, я бы хотел использовать пиксельных шрифт на сайте, скачал его из интернета, но не понял как использовать его.
      Интернет обсёрфил, не нашёл.
      Помогите пожалуйста.
    • By Anastasiya
      Подскажите как найти автора шрифта - на сайте https://www.myfonts.com есть имя автора но контактов нет, и как купить шрифт у автора?
  • Member Statistics

    46,367
    Total Members
    3,128
    Most Online
    EugeneWebdev
    Newest Member
    EugeneWebdev
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.



  • Спрашивают сейчас

  • Пишут сейчас

    • Когда есть с кем, и есть куда, хожу на настольный теннис. Когда два раза в неделю, а когда и два раза в месяц. Сейчас в универе, где мы играли, отпуска, а другие места или ужасные (плиточный пол, например), или рано закрываются. Самая проблема — это найти себе напарника своего уровня, готового регулярно заниматься. Энтузиазм почему-то есть только у тех, кто ещё только учится ракетку держать, а я держать уже могу, мне надо играть учиться.
    • Увеличилась. Не 1000 долларов, конечно, и в рублях, но семье есть, что покушать. Меня держит то, что я больше ничего не умею. Продавцом в супермаркете я не выдержу, с людьми взаимодействовать вообще не люблю, у меня для этого менеджер, с которым я тоже не люблю взаимодействовать. По образованию мне положено работать на заводе, но нас в универе не учили ничему, что помогло бы сразу пойти и работать, дали только некоторые теоретические азы, которые я давно забыл. А для качественной работы, я считаю, нужно иметь не азы, а понимание сути происходящего. Лично я вообще не научился понимать, зачем в цепи, скажем, резистор стоит, или где его нужно поставить и зачем. Особенно, когда нам начинали рассказывать, и у каждого резистора по 2-3 назначения, эдак поставишь его куда-нибудь, а он аукнется смещением постоянного напряжения где-то в другом конце схемы.
      Новые фреймворки, можно сказать, не учу, хотя надо бы, без них я работу сменить не смогу, если приспичит, но у меня не остаётся моральных сил после работы ещё что-то учить. Я даже на велосипеде ездить перестал.
      В программировании у меня, к сожалению, тоже азы с некоторой специализацией в вёрстке. Я не знаю многих тонкостей, и никогда, например, не углублялся в такие темы, где понадобились бы Reflection в PHP. Или, например, я люблю использовать SQL-запросы вместо ORM, потому что польза ORM для меня не пересиливает их многословность и косноязычность. Я, конечно, понимаю, что если следовать принятым стандартам, то потом легче дорабатывать код, но я пришёл в разработку из домашних проектиков, и так и не научился наслаивать абстракции ради стандартов. А, скажем, вебпак только позавчера стал поковыривать, чтобы понимать, что в нём вообще происходит, а то он сейчас везде. Настолько некрупные проекты у меня всегда были, что мне хватало отдельных JS-файликов.

      И вообще, когда я с условного Delphi переходил на веб, то меня привлекало то, что не нужно ничего компилировать, не нужно ничего ставить, можно лишь запустить блокнот, а браузер уже есть на любом компьютере. Теперь этого ничего уже нет, постоянно то npm, то composer, сборка vue, сборка scss, когда без vue. У питонщиков и ноды, так вообще, веб-сервер является частью проекта, и чтобы что-то исправить, надо его перезапускать, а не как в PHP, просто файлик подправить. Веб перестал быть простым.
    • Всем привет. Слышал советы, что вместо пикселей желательно использовать rem для задания размеров. Решил, в качестве эксперимента, попробовать задать для html определённый размер в пикселях, а дальше везде использовать уже rem. И вроде всё нормально, даже очень удобно. Но под конец решил я уменьшить масштаб страницы и вот тут появились проблемы. Если использовать такой код: html { font-size: 10px; } .box { background: red; width: 100px; height: 400px; } То по итогу всё нормально, сколько масштаб не уменьшай, результат всё те же 400px. Но стоило изменить единицы измерения в высоте: html { font-size: 10px; } .box { background: red; width: 100px; height: 40rem; } И вот тут уже появляется проблема. При уменьшении масштаба страницы до 50% к размеру высоты: в Google Chrome и Yandex браузерах добавляется дополнительные 80px, в Opera итоговая высота элемента увеличивается до 960 px. А вот в Firefox всё нормально и по итогу выходят те же 400px. Подскажите в чём тут проблема? Это особенности rem или браузеров на основе WebKit? И вообще, я понимаю, что многие советуют явно высоту элементов не задавать, но если это необходимо, то какие единицы измерения посоветуете для этого использовать?
  • Popular Contributors