Почему нижние части чаш моего p и q в этом шрифте Typekit обрезаются? - PullRequest
Новая
       50

Почему нижние части чаш моего p и q в этом шрифте Typekit обрезаются?

0 голосов
/ 12 февраля 2020

Используя веб-шрифт (Tablet Gothi c от Typekit / Adobe Fonts) для проекта на работе, мы заметили, что на машинах Windows и Linux, независимо от браузера, нижний бит чаш на клавиатуре и q обрезаются, а спуски остаются нетронутыми. Использование более толстого варианта шрифта не устраняет проблему, а лишь делает ее чуть менее очевидной.

image 1.

enter image description here

image 2.

enter image description here

(это скриншоты из TeamViewer, извините за зернистость)

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

Я пытался исправить это с помощью -webkit-font-smoothing, text-rendering, line-height, увеличивая вес и размер, но лучшее, что я смог получить, это письма с неповрежденными счетчиками, но с плоскими внешними основаниями.

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

Редактировать: вот репродукция, которая, вероятно, видна только на машинах Windows и Linux:

Edit2: подтвердил, что этот пример испытывает ту же проблему на машинах не-MacOS. 

h2 {
    font-family: "tablet-gothic", sans-serif;
    font-size: 2rem;
    font-weight: 300;
    color: #005556;;
}
<!DOCTYPE html>
<html lang="en-US">

<head>
  <!-- General meta tags needed-->
  <meta charset="utf-8">
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <!-- Needed for responsive design -->
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <title>Hinson & Hale Medical Technologies</title>

  <!-- Adobe Fonts -->
  <link rel="stylesheet" href="https://use.typekit.net/vbf4dsu.css">

  <!-- FontAwesome -->
  <script src="https://kit.fontawesome.com/914ac9a7cf.js" crossorigin="anonymous"></script>

  <!-- JQuery -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
</head>

<body>

  <h2>FDA-Approved</h2>
  <h2>Frequently</h2>
  <h2>ppppppppp</h2>
  <h2>qqqqqqqqq</h2>

</body>
...