解决谷歌如何显示小于12px的字体问题

2024-10-13 17:30:25

1、第一步：将标签块级化display:block;或display:inline-block;等等。。。否则会如图不会改变大小

2、第二步：需要缩小的标签加上scale.b{ font-size: 10px; -webkit-transform: scale(0.5); }此时出现了一个问题，虽然字体缩小了，但字体并居左

3、第三步：解决缩小后字体不居左显示问题在样式中加入-webkit-transform-origin-X: left稆糨孝汶;.b{ font-size: 10px; -webkit-transform: scale(0.5); -webkit-transform-origin-X: left; }

4、源代码：<!doctype html><html争犸禀淫><head><meta charset="UTF-8">媪青怍牙<title>Document</title><style> .b{ font-size: 10px; -webkit-transform: scale(0.5); -webkit-transform-origin-X: left; } .c{ font-size: 12px; }</style></head><body><div>比12小的字体</div><div>12px的字体</div></body></html>

5、解释：-webkit-transform: scale(0.5); /*定义2D缩放*/-webkit-transform-origin-X: left; /*定义视图被置于 X 轴的何处*/