Chrome и его механизм рендеринга Blink, похоже, имеют некоторые неочевидные правила масштабирования шрифтов. Мне неизвестна какая-либо официальная всеобъемлющая документация, поэтому давайте перейдем к источнику.
(Обратите внимание, что я не являюсь экспертом по внутреннему устройству Chromium в целом или рендереру Blink в частности. Я просто просматривал исходный код и размышлял о наиболее вероятных ответах на поставленные вопросы.)
Мне кажется, что движок обращается к класс FontBuilder
во время перерисовки. Этот класс имеет различные методы отправки, которые передают DOM, масштабирование и другие важные факторы в метод, который кажется решающим: /WebKit/Source/core/css/FontSize.cpp" rel="noreferrer">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, определенные в другом месте, будут иметь нижнюю границу 9 пикселей.
См. CodePen: http://codepen.io/larrybotha/pen/wKYYXE.
Обходной путь: абсолютная единица в html, единица em в теле. рем везде.
Возможно, будет разумно наблюдать за этой ошибкой для дальнейшего развития, хотя, возможно, и не затаив дыхание. Последнее обновление было в 2015 году.
person
bishop
schedule
02.01.2019
-webkit-text-size-adjust: none
, все еще нет любви? - person Chris W.   schedule 19.12.2018-webkit-text-size-adjust: none;
. - person Stephen Watkins   schedule 19.12.2018px
- ваш единственный выход. - person jmcgriz   schedule 02.01.20196px
, но он не соответствуетrem
единицам. Например, я могу установить размер шрифта6px
, если я явно используюpx
, но не меньше6px
, как и ожидалось. Это другая проблема. - person Stephen Watkins   schedule 03.01.2019