Chrome一直有一个限制,中文网页的字体不能小于12px,英文网页的字体不能小于6px(有时候是10px)。流传很广也很古老的两个替代方案我认为都不是好方法:
1.自2013年Chrome27之后-webkit-text-size-adjust就无效了;
2.transform scale的解决方案有硬伤,它不会改变文字所需占据的面积。
随着时代的发展,这个问题又有了更多的坑。截止今天Chrome的最新版为75。
具体什么才算“中文网页”,其实和网页本身没有关系,这和用户在Chrome的设置里(chrome://settings/languages)把哪种语言设置为Chrome的默认显示语言有关,这是今天的知识点之一。
后来Chrome又给这个最小字体的限制开了一个口,前提是得用户自己在 chrome://settings/fonts 中手动更改“最小字号”的设置,可以设为0、6、7、8……24px这几个值,这是知识点之二。
Chrome的“12px限制”这里的“px”实际上指的是显示器的物理像素,并非我们CSS里的逻辑像素,例如Retina、4K这样的高清屏或更改过显示比例的显示设备和浏览器窗口,它的设备像素比(devicePixelRatio = 物理像素 / 逻辑像素)很多情况下并不是1。也就是说,Chrome默认的“最小字号”实际的逻辑像素值(= 12px / window.devicePixelRatio )是一个动态值。这是知识点之三。
接下来我们做一个实验,把Chrome“最小字号”设置为0。理论上,现在已经没有“最小字号”的限制了。(假设当前显示设备像素比为1,即 设置更改前默认最小字号逻辑像素和物理像素均为12px)
现在有这么一个结构的页面 (https://codepen.io/miccycn/pen/ewZrJy)
html(font-size:25%)
body
div(font-size:0px)
div(font-size:1rem;width:20rem;height:20em;background:lightblue)
div(font-size:0rem)
div(font-size:1rem;width:20rem;height:20em;background:pink)
匪夷所思的一幕出现了!!
诡异的是,
同样都是font-size:1rem;width:20rem;height:20em,蓝色块和红色块面积居然不一样;
对于蓝色块,width和font-size同样是用rem做单位,font-size里1rem是4px,width里1rem却是12px;
对于蓝色块和红色块,它们的font-size都是1rem,但实际蓝色块的文字是4px,红色块的文字是12px;
这个世界不会好了………………………………
通过实验我们可以看到,让 Chrome 的“最小字号”设置【对文字】生效的另一个前提是,元素本身和它一直到根节点的父级元素的 font-size 不能全都是例如 %、rem、em 等这样需要基于父元素font-size计算的单位。例如父元素中有使用 px 作为单位的 font-size 就可以触发“最小字体设置”对其子元素的所有 font-size 生效。
而对除了 font-size 之外的属性,例如在刚才这个例子中用 rem 作为单位的 width、height 等,“最小字体设置”对它们是不会生效的,它们会一直受 Chrome 默认最小字体 12px 的影响。
别问我怎么知道的,还不是因为掉坑里了……这个坑要再追查下去我就要翻 Chrome 源码给他们提 bug 了,但鬼知道这个是bug还是feature,非要用科学的语言解释冒泡什么的也能解释,但这是否符合预期还是有待考究的。
曾经有一种“最佳实践”是使用rem来做全站的响应式设计,是把根元素 HTML 的 font-size (默认16px)设置为 62.5%,目的是为了让 1rem = 16px * 62.5% = 10px,便于用rem指定元素的尺寸(比如1.2rem=12px,1.4rem=14px),这样响应式的时候就可以直接改变 HTML 的 font-size 而无需计算其他各种样式中出现的尺寸。这个“最佳实践”最容易掉这个坑里,除此之外,作为基数的浏览器根元素 HTML 的 font-size 用户也是可以自行更改的。
所以,如果仍想使用这个“最佳实践”,请考虑把 HTML 的 font-size 显式地写成10px,不要用 %、em、rem;如果你们还想考虑中日韩泰文用户的感受,即 Chrome 里在设备像素比为1时默认会有逻辑像素12px这个怎么样都不能完全绕开的限制,一个思路是考虑把 HTML font-size设为100px。
这个“最佳实践”还有哪些其他的副作用欢迎大家补充(其实我个人并不欣赏这个最佳实践)。