chrome 为了提升用户体验,根据电脑分辨率等条件给浏览器设置了默认的最小字号 min px,小于这个字号的字体将仍然使用 min px 显示
浏览器 -->设置 (settings)--> 高级设置 (advanced)--> 显示(Appearence)-->Customise fonts-->Minimum font size
我这里最小字体是 10px,因此 5px 的字体在我的浏览器中仍然会显示为 10px
- class="small-name">
- 用户名
CSS 部分
- .small - name {
- font - size: 5px;
- }
将 css 部分修改为
- .small-name {
- -webkit-transform-origin-x: 0;
- -webkit-transform: scale(0.5);
- font-size: 10px;
- }
这个时候所有 chrome 浏览器都会按照 10px 的一半,也就是 5px 来显示。
按上面的方案解决之后,会发现是整个
都缩小了一半,怎么样使得只有字体缩小呢?
- div
- .small-name {
- width: 200%;
- -webkit-transform-origin-x: 0;
- -webkit-transform: scale(0.5);
- font-size: 10px;
- }
将宽度设置为原来的两倍,搞定~
来源: https://juejin.im/post/5a30ebc2f265da4307034318