字体小于12px解决方案

发表于 更新于 分类于 阅读次数： 本文字数： 1k 阅读时长 ≈ 1 分钟

以往设计图给的字号一般最小就是 12px， 开发人员一般是使用谷歌浏览器来进行调试运行。
谷歌浏览器上显示字体最小为 12px，css 设置 font-size：10px，运行代码显示结果仍然是 12px 大小，但是挡不住甲方有时就是强调使用的字号，必须是特别小的字号，就比如说某些网站设计的噱头–“买房送老婆”，但其实你不知道的是，在“老婆”两个字之后，还有一个小到你需要用放大镜去看的“饼”字，就问你惊不惊喜，意不意外？

解决

transform:scale()，使用广泛。

优点：单行、多行文本都可使用

缺点：只是视觉效果变小，并不会改变盒子的实际占位，在对齐其他盒子时不太友好

示例：购物车图标

  • 可以先将整个盒子的尺寸属性都放大 2 倍，再利用scale(.5)缩小为原来的一半。这里可以同时解决.5px border的问题
1
2
3
4
5
6
7
8
9
10
11
12
13
<style>
  .cart {
    height: 40px;
    line-height: 40px;
    font-size: 20px;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
  }
</style>

<div class="cart">...</div>
  • 红点盒子内是字体盒子，字体盒子缩小一半
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style>
  .cartDot {
    height: 0.75rem;
    min-width: 0.75rem;
    border-radius: 0.375rem;
    background: red;
    color: white;
    text-align: center;
    line-height: 0.75rem;
  }
  .num {
    font-size: 20px;
    -webkit-transform: scale(0.5);
  }
</style>

<div class="cartDot">
  <div class="num">99</div>
</div>

相关链接

[1] 设置浏览器显示小于 12px 以下字体的三种方法