Chrome 奇怪的字体大小行为答案

【问题标题】：Chrome odd font-size behaviourChrome 奇怪的字体大小行为
【发布时间】：2021-07-02 09:51:57
【问题描述】：

Google Chrome（版本 89.0.4389.114，64 位）在为 font-size 属性使用 % 值时会出现一些奇怪的行为。

与预期的行为不同，将字体大小减小到给定百分比，如果计算出的字体大小小于6px，它将停止这样做，并且不会低于那个神奇的6px。 FireFox 确实按预期缩小了字体。

例子：

我创建了this fiddle，其中我将:root 的字体缩小到1%。在这两种浏览器中，默认字体大小为16px，因此预期的字体大小为0.16px。 FireFox 确实如此渲染它，但 Chrome 却没有，因为渲染的字体大小为 6px。左侧为 FireFox，右侧为 Chrome 的图像来说明问题，而无需您摆弄https://pbs.twimg.com/media/EyTFQ3WWgAA_fL6?format=png&name=large。

所以我想知道，有人知道如何绕过这个吗？

我需要它为% 单位工作，因为我使用它来启用这种“rem 到 px”的转换。通过将:root 的font-size 设置为6.25%，1rem 将等于1px（如果浏览器的默认字体大小设置为16px）。这使我能够以rem 为单位开发网站，而不必一直处理转换。好处？当用户决定将其默认字体大小更改为 f.e.20px 时，该站点现在将完美缩放。

我还没有找到解决方法，因此非常感谢任何想法！

干杯

【问题讨论】：

听起来太小了，无法阅读！但你可以试试calc(1% * 1) 或其他东西，看看是否超出限制？
类似，虽然不完全相同，但在这里讨论 [link]stackoverflow.com/questions/53856831/… - 6px 似乎是 Chrome 的下限。
@Damon，很遗憾这不起作用:(
@AHaworth，感谢您的链接，这清除了一些东西。遗憾的是，在 cmets 中没有解决方案。至少它让我安心，知道这不是我的错；）

标签： html css google-chrome fonts frontend

【解决方案1】：

这是 Chrome 的一项功能，旨在防止字体变得难以辨认。 Chrome 不能假设开发人员总是使用乘数将字体大小恢复为可读值，因此它强制执行最小大小。

调整字体大小以方便 rem 计算的常规方法是将基本字体大小设置为 62.5%，而不是 6.25% 或 1%，然后以 x.y 为增量使用 rem：

:root {
  font-size: 62.5%;
}

.foo {
  font-size: 1.2rem; /* 12px */
}

见CSS fonts rem trick: 62.5% or 6.25%

【讨论】：

确实是一个很好的解决方法，遗憾的是它需要我在代码库的任何地方添加小数点，所以有点麻烦。感谢您的建议，以后肯定会考虑使用它！