小于12px字体的处理方法_processon字体大小怎么调-CSDN博客

本文链接：https://blog.csdn.net/wozhenhaokan/article/details/122242367

在项目中遇到需要固定宽度且限制字数的标签，原本设置为12px字体。为满足需求，尝试使用CSS的scale缩放来缩小字体，但此方法带来了一些挑战。通过运行代码示例，可以观察到缩放效果及其潜在问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目中有文字标签需要固定宽度，所以需要对超过字数限制的标签做特殊处理，预设的字体是12px，产品那边让继续缩小字体，常规的话肯定是不能缩小了，所以想到了用scale缩放，但是缩放的话也遇到了一些问题，都放在代码注释里了，可以自己运行起来看下效果。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>小于12px字体处理方案</title>
  <style>
    div {
      width: 60px;
      text-align: center;
      border: 1px solid #000;
    }

    span {
      font-size: 12px;
    }

    .span1 {
      /* 直接设置8px肯定是不生效的，chrome支持的最小字体是12px */
      font-size: 8px;
    }

    .span2 {
      font-size: 12px;
      /* transform对行内元素不生效 */
      display: inline-block;
      /* 单纯使用缩放的话，我们会看到其实左右还有剩余的空间可以利用 */
      transform: scale(0.8);
    }

    .span3 {
      font-size: 12px;
      /* transform对行内元素不生效 */
      display: inline-block;
      /* 左右占位拉开，可以搜一下双飞翼布局，利用margin负值的原理 */
      margin: 0 -8px;
      transform: scale(0.8);
    }
  </style>
</head>

<body>
  <div>
    <span>常规参照</span>
  </div>
  <div>
    <span class="span1">小于12px字体</span>
  </div>
  <div>
    <span class="span2">小于12px字体</span>
  </div>
  <div>
    <span class="span3">小于12px字体</span>
  </div>
</body>

</html>