如何让Chrome支持小于12px的文字【前端每日一题-5】

最新推荐文章于 2024-07-12 09:17:21 发布

转载最新推荐文章于 2024-07-12 09:17:21 发布 · 804 阅读

4 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5d294a1f6fb9a07eb74b6aa8

文章标签：

#前端 #ViewUI

谷歌浏览器默认最小字体为12px，小于12px的字体都以12px显示。文章介绍了解决此问题的方法，如设置-webkit-text-size-adjust:none（最新chrome已不支持），还可设置-webkit-transform:scale(0.8)。

如何让Chrome支持小于12px的文字？

谷歌浏览器默认最小字体为12px，小于12px的字体它都以12px显示。

查阅了一些文章，解决方法大致如下：

设置-webkit-text-size-adjust:none;（最新chrome已不支持）
设置-webkit-transform:scale(0.8);

.chrome_adjust{
    font-size: 10px; //针对可以识别12px以下字体大小的浏览器
    -webkit-transform: scale(0.8);
    -webkit-transform-origin-X: left; //定义文字相对于X轴的位置
    -o-transform: scale(1); //针对能识别-webkit的opera browser设置  
    display: inline-block;
}

//至于为什么要设置display:inline-block； 因为scale属性只对可以定义宽高的元素有效。
复制代码

转载于:https://juejin.im/post/5d294a1f6fb9a07eb74b6aa8