css3字体缩放样式text-size-adjust 分析与用法

474 1 年前
text-size-adjust检索或设置页面中对象文本的大小调整,因为缩放适配小屏幕(手机端)而导致文字会变得很小,许多手机浏览器会使用文本溢出算法让文本变大来达到更易读的效果,这就是text-size-adjust属性的作用

text-size-adjust 是什么

引用 MDN 上对 text-size-adjust 的解释:

text-size-adjust 属性 允许我们控制将文本溢出算法应用到一些手机设备上。这个属性还没有写进标准,使用时必须加上前缀:-moz-text-size-adjust-webkit-text-size-adjust,,和 -ms-text-size-adjust。 因为缩放适配小屏幕而导致文字会变得很小,许多手机浏览器会使用文本溢出算法让文本变大而更易读。当一个包含文本的元素宽度用了 100%,他的文本大小会增加直到达到一个易读的大小,但是不会修改布局。

text-size-adjust 的语法

text-size-adjust:auto | none | <percentage>

默认值:auto 适用于:所有元素 属性值

  • auto:文本大小根据设备尺寸进行调整。
  • none:文本大小不会根据设备尺寸进行调整。
  • <percentage>:用百分比来指定文本大小在设备尺寸不同的情况下如何调整。

text-size-adjust 的说明

  • 检索或设置移动端页面中对象文本的大小调整。
  • 该属性只在移动设备上生效(PC端chrome中文不能小于12px也是这个属性做怪);
  • 如果你的页面没有定义meta viewport,此属性定义将无效;
  • 对应的脚本特性为textSizeAdjust

text-size-adjust 的用法

text-size-adjust会根据设备尺寸而自动调整文字大小,这对于前端效果并不一定是需要的,所以我们一般会修改这个属性,将字体大写严格设置为我们定义的大小

html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

或者是:

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

设置为 text-size-adjust:nonetext-size-adjust:100% 两种设置等效。 另外,text-size-adjustiPhone 上默认值为 autoiPad 上的默认值为 none,所以 iPad 并不会出现文字调整的现象。

分类栏目
© 2018邮箱:11407215#qq.comGitHub沪ICP备12039518号-6