网页字体缩放样式-webkit-text-size-adjust的用法详解

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

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

写页面的应该都知道Chrome浏览器默认状况下的字体最小为12px,若是你要设置某字体大小为10px的话,你会在Chrome发现仍是12px。若是要使今生效的话,就得修改Chrome的默认配置了,通常应用下面的代码就能在全局生效了:web

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

可是这样设置以后会有一个问题,就是当你放大网页时,通常状况下字体也会随着变大,而设置了以上代码后,字体只会显示你当前设置的字体大小,不会随着网页放大而变大了,这样对有须要放大网页观看的用户形成了很差的用户体验,因此不建议全局应用该属性,而是在须要的状况单独使用就行了。chrome

在中文版Chrome里面,网页CSS里全部小于12px的字体设置都无效,最终将显示12px。这样弄的本意多是好的,由于中文一旦小于12px,就变得不易阅读。浏览器

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

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

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

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

若是要打开缩放功能,则定义下面的全局样式:设计

1
*{-webkit-text-size-adjust:auto !important;}
相关文章
相关标签/搜索