网页字体缩放样式-webkit-text-size-adjust


一、先搬来知乎的回答

-webkit-text-size-adjust 的本职是用于mobile的,见规范 CSS Mobile Text Size Adjustment Module Level 1 和 apple 的 Safari Web Content Guide
之所以现在的桌面版webkit浏览器支持他,是因为实际上这是一下bug。Bug 56543 – CSS property "-webkit-text-size-adjust" means different things in Safari and iOS
这个bug在最新版的 WebKit Nightly Builds 里已经被修复了。
这属性现在的一般用处是防止iPhone在坚屏转向横屏时放大文字(注意,就算viewport设置了maximum-scale=1.0 文字还是会放大的)。
而且iPhone和iPad的默认设定是不一样的
iPhone默认设定 -webkit-text-size-adjust: auto;
iPad默认设定 -webkit-text-size-adjust: none;
所以iPad默认是不调节的。
此属性还支持百分比,这在当前的桌面版的webkit浏览器是不支持的,所以如果不想让iPhone横坚屏切换的时候调节文字,用 -webkit-text-size-adjust: 100%; 绝对不能用 -webkit-text-size-adjust: none; 这会导致仍然支持 -webkit-text-size-adjust: none;的桌面版的webkit浏览器无法人为放大文字大小,严重影响可用性。

关于如何在chrome里实现小于12px的文字。
当然文字缩小到12px以下本来就一定程度影响到可用性了,建议无视chrome的这个特性。
硬要实现的话,我想到的一个变通方法是
先用js判断是否为chrome (至今还没听说有区分safari 和 chrome 的 css hack )

var isChrome = !!window.chrome;
再用-webkit-transform: scale( ) 缩小到合适值。

作者:仇俊斌
链接:http://www.zhihu.com/question/21012907/answer/17085623
来源:知乎


二、再搬来明凯博主的解释  

链接:明凯博客

1、当样式表里font-size<12px时,中文版chrome浏览器里字体显示仍为12px,这时可以用 html{-webkit-text-size-adjust:none;}
2、-webkit-text-size-adjust放在body上会导致页面缩放失效
3、body会继承定义在html的样式
4、用-webkit-text-size-adjust不要定义成可继承的或全局的

苹果移动设备上会识别,用于保证文字大小。

写页面的应该都知道Chrome浏览器默认情况下的字体最小为12px,如果你要设置某字体大小为10px的话,你会在Chrome发现还是12px。
如果要使此生效的话,就得修改Chrome的默认配置了,一般应用下面的代码就能在全局生效了:

html {
    -webkit-text-size-adjust: none; 
}

但是这样设置之后会有一个问题,就是当你放大网页时,一般情况下字体也会随着变大,而设置了以上代码后,字体只会显示你当前设置的字体大小,不会随着网页放大而变大了,这样对有需要放大网页观看的用户造成了不好的用户体验,所以不建议全局应用该属性,而是在需要的情况单独使用就好了。

在中文版Chrome里面,网页CSS里所有小于12px的字体设置都无效,最终将显示12px。这样弄的本意可能是好的,因为中文一旦小于12px,就变得不易阅读。

但中文版Chrome也会阅读英文网站啊,中文网页里面也会有英文的小字体设置需求啊,尤其是一些文字部份的设计,不小实在不好看,影响整个排版的美观。

解决方案,添加一个私有属性到html选择器:

html{-webkit-text-size-adjust: none;}

顾名思义, 禁用Webkit内核浏览器的文字大小调整功能。

如果要打开缩放功能,则定义下面的全局样式:

*{-webkit-text-size-adjust:auto !important;}





你可能感兴趣的:(CSS)