REM字体大小未调整到任意阈值以下

本文介绍了REM字体大小未调整到任意阈值以下的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ 在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; 设置为父元素.例如，如果将 font-size:0; 添加到 .container ，则将呈现正确的字体大小.有人知道为什么它不尊重大小低于某个阈值吗?解决方案 Chrome及其Blink呈现引擎似乎具有一些不太明显的字体缩放规则.我不知道任何正式的综合文档，因此让我们看一下源代码. (请注意，我通常不是Chromium内部结构专家，也不是Blink渲染器专家.我只是在跟踪源代码，并推测出所提出问题的最可能答案.) 在我看来，引擎会调用重绘期间的 FontBuilder 类.此类具有多种分配方法，可将DOM，缩放和其他相关因素传递给看似至关重要的方法: FontSize :: getComputedSizeFromSpecifiedSize .通过这种方法，我们看到了一些多汁的评论，可以解决您提出的问题: 1.为什么将 font-size:0; 设置为父元素会解决此问题? //字体大小为0px的文本不可见，因此需要//不受最小字体大小规则的限制.Acid3依靠它来获得完美的像素//渲染.这也与其他具有最低要求的浏览器兼容//字体大小设置(例如Firefox). 2.为什么不尊重rem大小低于某个阈值? //我们支持两种类型的最小字体大小.首先是硬性覆盖//适用于所有字体.这是"minSize".第二类最小值//字体大小是智能最小"，仅当网页无法显示时才应用//知道其实际要求的大小，例如，何时使用逻辑大小(例如//"small"或将字体大小表示为用户默认字体的百分比//字体设置.//使用最小的智能字体，我们再也不想比最小的字体小//大小以保持字体可读.但是，我们始终允许页面设置//较小的显式像素大小，因为否则网站将渲染错误//(例如，最小为9px的http://www.gamespot.com). 3.出于好奇，给定相对单位(例如 x-small )时这些最小值是多少? //严格模式表与MacIE和Mozilla的设置完全匹配.静态const int strictFontSizeTable [fontSizeTableMax-fontSizeTableMin +1] [totalKeywords] = {{9，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，12，14，18，24，36}，{9，10，12，13，13，20，26，39}，//固定字体默认(13){9，10，12，14，14，17，21，28，42}，{9，10，13，15，15，18，23，30，45}，{9，10，13，16，18，24，32，48}//比例字体默认值(16)};//HTML 1 2 3 4 5 6 7//CSS xxs xs s m l xl xxl//|//用户偏好 有趣的是， FontBuilder 类分派给 TextAutosizer :: computeAutosizedFontSize 来缩放字体大小.此方法使用硬编码值和可变比例因子: //某种任意的令人愉悦"的字体大小.const float pleasantSize = 16;//乘以页面作者指定的字体大于//越来越少，直到完全不增加大字体为止.//对于介于0和pleaseSize之间的指定大小，我们直接应用//乘数；因此，对于指定的大小== pleasantSize，计算的大小将为//乘数* pleasantSize.对于更大的指定尺寸，我们要//逐渐淡出乘数，因此每增加1px//指定的大小超出令人愉快的大小，我们将只增加计算大小//乘渐变梯度后优先像素px直到我们遇到///compedSize = specificedSize行，之后我们停留在该行上(因此//然后，如果defineSize每增加1像素，就将计算尺寸增加1像素).const float gradientAfterPleasantSize = 0.5; 根据这些事实，我们看到有大量的硬编码像素值，其中通常将 9 和 16 散布在相关代码上.这些硬代码，一些将字体缩小到一定限度的规则的存在，以及使用font-size进行覆盖的功能似乎都与观察结果相符，并暗示它的行为符合预期-不一定是直观的.此外，我发现最新的评论发布在 Chrome错误#319623 非常类似于您的报告.谨慎地观察该错误的进一步发展，尽管可能无法屏住呼吸.最后一次更新是在2015年.In Safari 12.0.2 and Chrome 71.0.3578.98 on Mac Mojave 10.14.2, when setting the font-size using rem units, the actual size won't go below 9px.See this example:https://codepen.io/stephenjwatkins/pen/OrbGxLMy browser's font size is set to the default (16px) with a minimum font size set to 6px:Setting text-size-adjust to none doesn't affect the problem. Firefox renders the size correctly.The only thing that I've found to fix the problem is setting font-size: 0; to a parent element. For instance, if you add font-size: 0; to .container, the correct font size is rendered.Does anyone know why it's not honoring the rem size below a certain threshold? 解决方案 Chrome and its Blink rendering engine seem to have some non-obvious font-scaling rules. I'm unaware of any official comprehensive documentation, so let's go to the source.(Note that I'm not an expert on Chromium internals generally or Blink renderer particularly. I've just been tracing through the source code and speculating on the most probable answers to the questions as posed.)It seems to me that the engine calls upon the FontBuilder class during a redraw. This class has various dispatch methods that pass the DOM, zoom, and other relevant factors into what appears to be the crucial method: FontSize :: getComputedSizeFromSpecifiedSize. In that method, we see some juicy comments that address the points you've raised:1. Why does setting font-size: 0; to a parent element fix it? // 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. Why is it not honoring the rem size below a certain threshold? // 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. For the curious, what are these minimum values when given relative units (eg 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 prefInterestingly, and a bit of an aside, the FontBuilder class dispatches to TextAutosizer :: computeAutosizedFontSize to scale the font size. This method uses hard coded values and a variable scaling factor: // 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;From these facts, we see there are a good number of hard-coded pixel values, with 9 and 16 being commonly sprinkled about the relevant code. These hard-codes, the presence of several rules to scale the font down to a limit, with the ability to override using font-size all seem to match the observations and suggest it's behaving as intended -- if not necessarily intuitively.Also, I've found that the most recent comment posted in Chrome bug #319623 very much resembles your report.It may be prudent to watch that bug for further developments, though maybe not with breath held. The last update was in 2015. 这篇关于REM字体大小未调整到任意阈值以下的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！