美文网首页
css3字体缩放样式-webkit-text-size-adju

css3字体缩放样式-webkit-text-size-adju

作者: Tokill_you | 来源:发表于2019-11-04 16:21 被阅读0次

写页面的应该都知道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;}

故-webkit-text-size-adjust的用法如下:
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不要定义成可继承的或全局的
————————————————
版权声明:本文为CSDN博主「juzipchy」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/juzipchy/article/details/71367642

-webkit-transform:scale(0.8)

之前可以设置一个百分比然后可以在网页上(pc)显示小于12px的字体,但后来谷歌新版本已经不支持这个属性了。如果还想实现小于12px的字体,要用-webkit-transform:scale(0.8)

相关文章

  • css3字体缩放样式-webkit-text-size-adju

    写页面的应该都知道Chrome浏览器默认情况下的字体最小为12px,如果你要设置某字体大小为10px的话,你会在C...

  • 每日总结

    每日单词 CSS3新增特性 @Font-face 特性 加载字体样式,而且它还能够加载服务器端的字体文件,让客户端...

  • 【小程序踩坑系列】02

    ios下,图片缩放动画,无论是api中的scale,还是css3样式keyframe里动态改变宽高,都可能导致图片...

  • CSS3简介

    CSS3即层叠样式表。 在网页制作时采用层叠样式表技术,可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加...

  • CSS3(5)字体

    以前的CSS字体样式需要用户的计算机上有安装相应的字体,但在CSS3中,我们可以自己完成这个工作,而不给用户提要求...

  • 2018-06-04

    字体的样式 CSS 属性: 字体样式(Font Style) 1 字体样式 {font:font-style fo...

  • HTML03-day

    文本标签 列表 颜色单位 字体分类 字体样式 行间距 颜色单位 字体其他样式 文本样式

  • 第十一周第四天笔记之css3知识解读

    1 css3知识解读 css3解读链接:css3知识解读 自定义字体利用@font-face{}引入自定义字体;创...

  • CSS样式(字体)

    字体样式包括 字体粗细 font weight 字体系列、样式 family and style 字体缩写 f...

  • 字体缩放

    字体可以自己控制缩放的列子,代码 结果:

网友评论

      本文标题:css3字体缩放样式-webkit-text-size-adju

      本文链接:https://www.haomeiwen.com/subject/pjydbctx.html