Jump to content
  • 0

Рендеринг шрифта отличается на macOS и Windows


Temiks
 Share

Question

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

 

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

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

 

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

Edited by Temiks
Link to comment
Share on other sites

3 answers to this question

Recommended Posts

  • 0

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

Link to comment
Share on other sites

  • 0

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

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

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

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

  • Like 1
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Similar Content

    • By Spllit
      Столкнулся с такой проблемой, что Avocode неверно определяет тощину шрифта на макете в отличии от Photoshop.  
      На скринах видно, что Avocode показвает, что толщина выделенного текста 400px. Однако Photoshop показывает, что выделенный текст имеет толщину extrabold, что равняется 800px. 
      С чем это может быть связано и как это пофиксить


    • 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 есть имя автора но контактов нет, и как купить шрифт у автора?
    • By Димитрий
      @font-face { font-family:'SF Pro Display'; font-style:normal; font-weight:100; src:local('☺︎'), url("/wss/fonts/SF-Pro-Display/v1/sf-pro-display_ultralight.woff2") format("woff2"), url("/wss/fonts/SF-Pro-Display/v1/sf-pro-display_ultralight.woff") format("woff"), url("/wss/fonts/SF-Pro-Display/v1/sf-pro-display_ultralight.ttf") format("truetype"); /* (C) 2015 Apple Inc. All rights reserved.*/ } @font-face { font-family:'SF Pro Display 100'; src:url("/wss/fonts/SF-Pro-Display/v1/sf-pro-display_ultralight.eot"); /* (C) 2015 Apple Inc. All rights reserved.*/ } То есть почему для ie пишут "SF Pro Display 100" а для остальных браузеров просто "SF Pro Display" ?
      Получается насыщенность/жирность (font-weight) шрифта ie не поддерживают, или что то еще ?
      Посмотрел в can i use font-weight там: 
      то есть получается поддержка есть с 6+ версии. Они что таким образом поддержку IE6 < реализовали ?
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy