We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
blog
有时候在做移动端页面的时候,会发现某些字体会自动放大(而页面中另一部分却是对的- -),放大的比例看上去还没啥规律,很是诡异。
网上一通搜索,还真搜出来了。
首先,这个不是bug,是Chromium内核提高移动端文本可读性的一个特性,叫做这个特性被称做「Text Autosizer」,又称「Font Boosting」、「Font Inflation」,具体可以见这个文档Chromium’s Text Autosizer,计算规则则可以在这里看到TextAutosizer.cpp,在文档里可以看到计算公式如下
multiplier = Math.max(1, deviceScaleAdjustment * textScalingSlider * systemFontScale * clusterWidth / screenWidth); if (originFontSize < 16) { computedFontSize = originFontSize * multiplier; } else if (16 <= originFontSize <= (32 * multiplier - 16)) { computedFontSize = (originFontSize / 2) + (16 * multiplier - 8); } else if (originFontSize > (32 * multiplier - 16)) { computedFontSize = originFontSize; }
变量解释:
originFontSize
computedFontSize
multiplier
deviceScaleAdjustment
viewport width=device-width
textScalingSlider
systemFontScale
clusterWidth
screenWidth
其实嘛,解决起来还是容易的~
试了下给元素单独设置width或height或max-height即可禁用Text Autosizer
width
height
max-height
给元素设置-webkit-text-size-adjust: none;可禁用Text Autosizer,这个属性还能使得我们在移动端使用小于12px的字体。此属性在桌面版中无效。
-webkit-text-size-adjust: none;
flexible.js字体大小诡异现象解析及解决方案
网页字体缩放样式-webkit-text-size-adjust的用法详解
以上。
new game!
The text was updated successfully, but these errors were encountered:
我佛了,没想到这个“特性”在三年后还是降临到我的头上了。
Sorry, something went wrong.
No branches or pull requests
webkit内核下,字号会自动放大的问题
blog
问题描述
有时候在做移动端页面的时候,会发现某些字体会自动放大(而页面中另一部分却是对的- -),放大的比例看上去还没啥规律,很是诡异。
一探究竟
网上一通搜索,还真搜出来了。
首先,这个不是bug,是Chromium内核提高移动端文本可读性的一个特性,叫做这个特性被称做「Text Autosizer」,又称「Font Boosting」、「Font Inflation」,具体可以见这个文档Chromium’s Text Autosizer,计算规则则可以在这里看到TextAutosizer.cpp,在文档里可以看到计算公式如下
变量解释:
originFontSize
: 原始字体大小computedFontSize
: 经过计算后的字体大小multiplier
: 换算系数,值由以下几个值计算得到deviceScaleAdjustment
:当指定
viewport width=device-width
时此值为 1,否则值在 1.05 - 1.3 之间,有专门的计算规则textScalingSlider
: 浏览器中手动指定的缩放比例,默认为 1systemFontScale
: 系统字体大小,Android设备可以在「设备 - 显示 - 字体大小」处设置,默认为 1clusterWidth
: 应用 Font Boosting 特性字体所在元素的宽度(如何确定这个元素请参考上边两个链接)screenWidth
: 设备屏幕分辨率(DIPs, Density-Independent Pixels),如 iPhone 5 为 320解决问题
其实嘛,解决起来还是容易的~
给元素指定宽高
试了下给元素单独设置
width
或height
或max-height
即可禁用Text Autosizer使用-webkit-text-size-adjust
给元素设置
-webkit-text-size-adjust: none;
可禁用Text Autosizer,这个属性还能使得我们在移动端使用小于12px的字体。此属性在桌面版中无效。参考资料
flexible.js字体大小诡异现象解析及解决方案
网页字体缩放样式-webkit-text-size-adjust的用法详解
以上。
new game!
The text was updated successfully, but these errors were encountered: