HTML проблема рендеринга шрифта на дисплее без сетчатки - PullRequest
Новая
       80

HTML проблема рендеринга шрифта на дисплее без сетчатки

2 голосов
/ 01 апреля 2020

У меня проблемы с отображением Poppins на моем сайте так же, как на демонстрационном сайте Google Fonts.

При использовании дисплея, не отображающего сетчатку, он выглядит «слишком тонким», например, столбцы на T имеют высоту всего 1px, а не 1.5px, когда я смотрю на тот же текст на font.google. com.

Мне больше нравится, как он выглядит на Google-шрифтах. На моем сайте шрифт выглядит «рубленым» вверху, но я не могу понять, что они делают в их HTML, чтобы получить другой рендеринг.

Этот код ручки демонстрирует проблему, но будьте осторожны: вам нужен дисплей без сетчатки, чтобы увидеть проблему!

Codepen screenshot

Код: 

<html>

<head>
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap" rel="stylesheet" />
</head>
<style>
  body {
    margin: 48px;

    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 18px;
  }

  main {
    display: grid;
    grid-template-columns: 20% 30% 40%;
    column-gap: 5%;
    align-items: center;
  }

  h2 {
    font-size: 1.2em;
    font-weight: normal;
    align-self: center;
  }

  a {
    color: #000;
  }

  small {
    display: block;
    font-weight: normal;
    font-size: 12px;
  }

  img:first-of-type {
    grid-row-end: span 2;
  }
</style>

<body>
  <h1>⚠️This issue is only visible on non-retina display!</h1>
  <main>
    <h2>
      Browser rendering
    </h2>
    <div>
      TITLE TEXT HERE IS 18<br />
      <small>^^^ T bars will be too thin on non-retina browser</small>
    </div>
    <img src="https://i.imgur.com/7LyzjJy.png" />

    <h2>
      Screenshot of Chrome on MacOS (broken)
    </h2>
    <div>
      <img src="https://i.imgur.com/2OZ0wv6.png" />
      <small>^^^ Notice how the T bar is too thin.</small>
    </div>

    <h2>
      Google Fonts<br />
      (screenshot of Bold 700 on <a href="https://fonts.google.com/specimen/Poppins?preview.text=HTML+TITLE+TEXT+HERE+IS+18&preview.text_type=custom&selection.family=Poppins:wght@400;700&sidebar.open">
        the demo page</a>)
    </h2>
    <div>
      <img src="https://i.imgur.com/dgld0Jw.png" /><br />
      <small>^^^ Notice how the T bars are thicker</small>
    </div>
    <img src="https://i.imgur.com/pQPZ6Ch.png" />
  </main>
</body>

</html>

Ответы [ 2 ]

3 голосов
/ 26 апреля 2020

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

Решение:

пока они не решат проблему, используйте Webfont

enter image description here

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

Кстати, это на ма c и отдельном экране HD

Примечание: Я заметил небольшой интервал между буквами / словами, но ничего, что не может исправить с помощью CSS letter-spacing или word-spacing

1 голос
/ 26 апреля 2020

Первое - начиная с macOS Mojave, Apple по умолчанию отключила сглаживание шрифтов. Это трудно заметить на Retina дисплеях, но легко заметить на не Retina . Выполнение defaults write -g CGFontRenderingFontSmoothingDisabled -bool NO и выход из системы в основном устраняет проблему. Без сглаживания шрифта текст выглядит немного меньше.

Вторая проблема заключается в том, как работают шрифты Google. Когда вы вводите текст предварительного просмотра на демонстрационной странице Google Fonts, вы загружаете только те символы, которые вам нужны для данного текста - это позволяет сэкономить пропускную способность, поскольку вы собираетесь загрузить около 18 его стилей.

Однако шрифт выглядит немного иначе.

Comparision

  1. Google Fonts embed
  2. Поппины, загруженные из Google Fonts, импортированные вручную через @ font-face
  3. Шрифт, созданный Google Fonts, загруженный со страницы сети в инструментах разработчика

1 и 2, выглядят одинаково. Разница в 3 почти незаметна, за исключением буквы T и E.

Также обратите внимание, что на демонстрационной странице Google Fonts текст отображается с -webkit-font-smoothing: antialiased;, что обычно делает текст немного меньше, может быть, это почему сгенерированный шрифт немного больше.

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

Google Fonts default Google Fonts real

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

...