Размер шрифта REM не регулируется ниже произвольного порога - PullRequest
0 голосов
/ 19 декабря 2018

В Safari 12.0.2 и Chrome 71.0.3578.98 на Mac Mojave 10.14.2, при установке font-size с использованием rem единиц измерения, фактический размер не упадет ниже 9px.

См. Этот пример:

https://codepen.io/stephenjwatkins/pen/OrbGxL

Rendered font size

Размер шрифта моего браузера установлен по умолчанию (16px) сминимальный размер шрифта, установленный на 6px:

Browser font settings

Установка text-size-adjust на none не влияет на проблему.Firefox правильно отображает размер.

Единственное, что я нашел для решения проблемы, - это установка font-size: 0; для родительского элемента.Например, если вы добавите font-size: 0; к .container, будет отображен правильный размер шрифта.

Кто-нибудь знает, почему он не учитывает размер rem ниже определенного порога?

1 Ответ

0 голосов
/ 02 января 2019

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

(Обратите внимание, что я не специалист по внутренним компонентам Chromium вообще или по Blink Renderer в частности. Я только что отслеживалчерез исходный код и размышления о наиболее вероятных ответах на поставленные вопросы.)

Мне кажется, что двигатель вызывает класс FontBuilder во время перерисовки,Этот класс имеет различные методы диспетчеризации, которые передают DOM, zoom и другие соответствующие факторы в то, что представляется ключевым методом: FontSize :: getComputedSizeFromSpecifiedSize.В этом методе мы видим несколько сочных комментариев, которые касаются вопросов, которые вы подняли:

1.Почему установка font-size: 0; для родительского элемента исправляет это?

  // Text with a 0px font size should not be visible and therefore needs to be
  // exempt from minimum font size rules. Acid3 relies on this for pixel-perfect
  // rendering. This is also compatible with other browsers that have minimum
  // font size settings (e.g. Firefox).

2.Почему он не соблюдает размер rem ниже определенного порога?

  // We support two types of minimum font size. The first is a hard override
  // that applies to all fonts. This is "minSize." The second type of minimum
  // font size is a "smart minimum" that is applied only when the Web page can't
  // know what size it really asked for, e.g., when it uses logical sizes like
  // "small" or expresses the font-size as a percentage of the user's default
  // font setting.

  // With the smart minimum, we never want to get smaller than the minimum font
  // size to keep fonts readable. However we always allow the page to set an
  // explicit pixel size that is smaller, since sites will mis-render otherwise
  // (e.g., http://www.gamespot.com with a 9px minimum).

3.Для любопытных, каковы эти минимальные значения, когда даны относительные единицы (например, x-small)?

// Strict mode table matches MacIE and Mozilla's settings exactly.
static const int strictFontSizeTable[fontSizeTableMax - fontSizeTableMin +
                                     1][totalKeywords] = {
    {9, 9, 9, 9, 11, 14, 18, 27},    {9, 9, 9, 10, 12, 15, 20, 30},
    {9, 9, 10, 11, 13, 17, 22, 33},  {9, 9, 10, 12, 14, 18, 24, 36},
    {9, 10, 12, 13, 16, 20, 26, 39},  // fixed font default (13)
    {9, 10, 12, 14, 17, 21, 28, 42}, {9, 10, 13, 15, 18, 23, 30, 45},
    {9, 10, 13, 16, 18, 24, 32, 48}  // proportional font default (16)
};
// HTML       1      2      3      4      5      6      7
// CSS  xxs   xs     s      m      l     xl     xxl
//                          |
//                      user pref

Интересно, и немного в стороне, класс FontBuilder отправляет TextAutosizer :: computeAutosizedFontSize для масштабирования размера шрифта.Этот метод использует жестко запрограммированные значения и переменный коэффициент масштабирования:

  // Somewhat arbitrary "pleasant" font size.
  const float pleasantSize = 16;
  // Multiply fonts that the page author has specified to be larger than
  // pleasantSize by less and less, until huge fonts are not increased at all.
  // For specifiedSize between 0 and pleasantSize we directly apply the
  // multiplier; hence for specifiedSize == pleasantSize, computedSize will be
  // multiplier * pleasantSize. For greater specifiedSizes we want to
  // gradually fade out the multiplier, so for every 1px increase in
  // specifiedSize beyond pleasantSize we will only increase computedSize
  // by gradientAfterPleasantSize px until we meet the
  // computedSize = specifiedSize line, after which we stay on that line (so
  // then every 1px increase in specifiedSize increases computedSize by 1px).
  const float gradientAfterPleasantSize = 0.5;

Из этих фактов мы видим, что существует большое количество жестко запрограммированных значений пикселей, при этом 9 и 16 обычно разбрызгиваются.о соответствующем коде.Эти жесткие коды, наличие нескольких правил для уменьшения шрифта до предела, с возможностью переопределения с использованием размера шрифта, похоже, соответствуют наблюдениям и предполагают, что он ведет себя так, как задумано - если не обязательно интуитивно.


Кроме того, я обнаружил, что самый последний комментарий, опубликованный в Ошибка Chrome # 319623 , очень напоминает ваш отчет.

Возможно, связанный: при использовании относительногоединицы измерения в теге html, значения на основе rem, определенные в других местах, будут иметь нижнюю границу 9px.

См. CodePen: http://codepen.io/larrybotha/pen/wKYYXE

Обходной путь: абсолютная единица измерения в html, em единица измерения в теле.Ремс повсюду.

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...