Skip to main content

解决chrome下字体不能小于12px的问题

背景​

谷歌浏览器默认最小字体为 12px，小于 12px 的字体它都以 12px 显示，有时我们需要字体小点，特别是在制作英文网站时，常常使用 CSS 样式显示小于 12px 文字，这样谷歌浏览器就不能显示所设置较小的文字。不过还是有解决方案的。

以上图片从左到右分别是 chrome，safari 和 firefox 浏览器，只有在 chrome 上字体小于 12px 的没有生效，这是因为 chrome 认为当字体小于 12px 就会增加识别难度，所以设置了浏览器最小字体为 12px。

解决方法​

1. 避免字体小于 12px 的需求​

2. 清除 chrome 的字体自动调整属性​

可以给页面的 body 元素设置

-webkit-text-size-adjust:none;

很不幸的是这种方法在 27 正式版之后的 chrome 中已经失效，这里就不展开介绍了

3. 使用图片​

把文字切成图片，这样做无疑会增加浏览器的请求时间。这种方法建议在需求量小的情况下使用

4. css3 缩放​

使用 CSS 样式 transform: scale()属性进行元素缩放，因为这个属性会将整个元素都进行缩放，所以可以使用标签将需要设置字体大小的内容包裹起来，同时给 span 标签设置 block 属性值

span {
  display: block;
  font-size: 12px;
  -webkit-transform: scale(0.8, 0.8);
}