Css REM字体大小未调整到任意阈值以下
在Mac Mojave 10.14.2上的Safari 12.0.2和Chrome 71.0.3578.98中,当使用Css REM字体大小未调整到任意阈值以下,css,blink,Css,Blink,在Mac Mojave 10.14.2上的Safari 12.0.2和Chrome 71.0.3578.98中,当使用rem单位设置font size时,实际大小不会低于9px 请参见此示例: 我的浏览器的字体大小设置为默认值(16px),最小字体大小设置为6px: 将text size adjust设置为none不会影响问题。Firefox正确呈现大小 我发现唯一能解决这个问题的方法是设置font size:0到父元素。例如,如果添加字体大小:0到.container,将呈现正确的字体大
rem
单位设置font size
时,实际大小不会低于9px
请参见此示例:
我的浏览器的字体大小设置为默认值(16px
),最小字体大小设置为6px
:
将text size adjust
设置为none
不会影响问题。Firefox正确呈现大小
我发现唯一能解决这个问题的方法是设置font size:0代码>到父元素。例如,如果添加字体大小:0
到.container
,将呈现正确的字体大小
有人知道为什么它不遵守低于某个阈值的rem
大小吗?Chrome及其闪烁渲染引擎似乎有一些不明显的字体缩放规则。我不知道有任何官方的综合文档,所以让我们来看看源代码
(请注意,我不是铬内部构件方面的专家,也不是铬渲染器方面的专家。我只是对源代码进行了跟踪,并推测了所提出问题的最可能答案。)
在我看来,引擎在重画时调用。此类具有各种分派方法,这些方法将DOM、zoom和其他相关因素传递到关键方法中:。在这种方法中,我们看到一些有趣的评论,它们解决了您提出的问题:
1。为什么设置字体大小: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).
// 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).
// 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
2。为什么不承认rem大小低于某个阈值?
// 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).
// 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).
// 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
3。好奇的是,当给定相对单位(例如x-small
)时,这些最小值是多少?
// 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).
// 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).
// 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
类调度以缩放字体大小。此方法使用硬编码值和可变比例因子:
// 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
通常被散布在相关代码中。这些硬代码,几个将字体缩小到一定限度的规则的存在,以及使用字体大小覆盖的能力,似乎都符合观察结果,表明它的行为符合预期——如果不一定是直觉的话
另外,我发现最近发表的评论与你的报告非常相似
可能相关:在html标记上使用相对单位时,其他地方定义的基于rem的值的下限为9px
见代码笔:
解决方法:html上的绝对单位,正文上的em单位。其他地方都有雷姆斯
谨慎的做法是观察该bug的进一步发展,尽管可能不会屏住呼吸。上次更新是在2015年。当您添加供应商前缀-webkit text size adjust:none
仍然没有爱?仍然没有爱,供应商前缀为-webkit text size adjust:none代码>。这是一个已知功能,我将尝试查找重复的问题。我相信这是的重复问题,但由于悬赏,我无法结束投票。这不是的重复问题。浏览器上的最小字体大小设置为6px
,但它不能使用rem
单位。例如,如果我明确使用px
,我可以将字体大小设置为6px
,但不能低于预期的6px
。这是一个不同的问题。好的研究和写作。虽然我不能说我完全赞同Blink的逻辑,但基于这个问题和你在这里分享的代码,我同意你的结论。很高兴这有帮助,@StephenWatkins。我希望这一分析至少是在球场上进行的,但我希望有一位Chrome专家打电话进来:这一切对我来说似乎有点不太妥当。解决方法只适用于文本的字体大小。不幸的是,如果你在像divs这样的容器上使用rem来表示宽度/高度,那么你就不能使用。今年早些时候,在chrome73中,出现了与最小字体大小和rem单位相关的问题。因此,Chrome现在允许最小字体大小为零,并且他们也更改了用户界面的设置。但是如果你将你的最小字体大小设置为非零,它可以将你的rem单位放大到很大。UI从0跳到6px,作为可用的最小大小,两者之间没有任何内容。我也希望看到一位Chrome专家进一步详细解释这一点。