LinDaiDai/niubility-coding-js

🎁第7期第4题：如何让Chrome浏览器支持小于12px的字体大小？

Opened this issue · 0 comments

LinDaiDai commented

如何让Chrome浏览器支持小于12px的字体大小？

使用：-webkit-transform: scale(0.8);

注意⚠️：它修改的整个元素的大小，所以如果是内联元素的话则需要转换为块元素或者内联块元素：

<style>
  .font_size_12 {
    font-size: 12px;
  }
  .font_size_small {
    font-size: 12px;
    display: inline-block;
    font-size: 10px;
    -webkit-transform: scale(0.8);
  }
</style>
<body>
  <div class="font_size_12">
    霖呆呆
    <span class="font_size_small">
      小号霖呆呆
    </span>
  </div>
</body>

效果如下：

其它的方法，原来还有一个-webkit-text-size-adjust:none;属性，设置了整个之后就可以去掉Chrome的字体限制，但是在Chrome更新到27版本之后就被干掉了。呆呆在现在的Chrome中试了一下已经没有效果了。

另外，网上还有说把要缩小的字设置变为图片...靠图片来展示...

貌似都不太靠谱呀，有靠谱的小伙伴还希望可以留言哦。