Различия в расположении шрифта в <span>между Mac и Windows - PullRequest
Новая
       22

Различия в расположении шрифта в <span>между Mac и Windows

0 голосов
/ 20 ноября 2018

Недавно я обнаружил шрифт (-файл), который, похоже, сильно отличается в пределах диапазона в разных операционных системах.Если кто-то, разбирающийся в шрифтах, знает, что именно здесь происходит, и если есть исправление или обходной путь для чего-то подобного, я был бы очень признателен.

Я сделал здесь ручку: https://codepen.io/jls_chris/pen/rQmpEE, который должен показать вам базовую настройку элемента: 

<div class="box">
  <div class="wrapper">
    <span class="value">24%</span>
  </div>
</div>

@font-face {
  font-family: 'Impact LT Std';
  src: url('https://sorry.font.is.licensed/ImpactLTStd.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

.box {
  height: 163px;
  width: 259px;
  position: relative;
  z-index: 10;

  // Set by gsap
  opacity: 1;
  transform: matrix(1, 0, 0, 1, 0, 0);

  // For debugging
  background-color: lightblue;

  .wrapper {
    height: calc(163px - 33px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    // For debugging
    background-color: lightgreen;

    .value {
      font-family: 'Impact LT Std', Sans-Serif;
      font-size: 95px;
      -webkit-font-smoothing: subpixel-antialiased;

      // For debugging
      text-decoration: underline;
      outline: 1px solid red;
    }
  }
}

Поскольку лицензия на шрифт не позволяет мне поделиться им, вот пара изображений:

В Windows(любой браузер):

Correct Positioning on Windows

На Mac (любой браузер):

Wrong Positioning on Mac

В Windows все выглядит правильно, но на Mac текст явно не центрирован, как я ожидаю.

Пролет правильно расположен на обоих и имеет правильные размеры, но кажется, чтоБазовая линия позиционируется совершенно по-разному на двух ОС.Я протестировал пару других шрифтов, но не смог воспроизвести его.

Кто-нибудь знает, что может быть не так / сломано в этом шрифте и может ли быть исправление?

1 Ответ

0 голосов
/ 26 ноября 2018

elveti связал следующий пост (в комментарии я бы принял этот комментарий в качестве решения, если это возможно): Рендеринг шрифтов / Проблема с высотой строки на Mac / PC (за пределами элемента) , в которой излагаетсята же проблема и содержала решение.

К сожалению, FontSquirrel не был вариантом, поскольку он блокирует шрифты Adobe.Но я отредактировал шрифт, используя FontForge, как упомянуто в сообщении Люка: https://stackoverflow.com/a/38508202/1084239

Для меня ни один из флажков не был отмечен, но метрики "Win ..." отличались от других метрик.Я скопировал значения «Win Ascent» и «Win Descent» в соответствующие поля «Typo» и «HHead», поскольку моя проблема заключалась в том, что mac неправильно отображал шрифт (и оставлял все флажки не отмеченными).После экспорта шрифта в виде ttf с использованием настроек по умолчанию и игнорирования любых предупреждений он сгенерировал шрифт, который в итоге корректно работал как на Mac, так и на Windows.

...