如何实现字体小于 12px 以及边框 0.5 px？一、字体小于12px的解决方案常用的方法是利用 transform

一、字体小于12px的解决方案

1、常用的方法是利用 `transform: scale(0.5)`

使用方法有两种：

将字体单独放在一个盒子内，利用 transform: scale 缩小字体。Eg：把红点和字放在两个div上，红点控制宽高，字体上的缩小用 transform: scale（推荐）。
- 优点：只对文字进行缩小，不会影响父元素
- 缺点：需要两个 div
先将整个盒子的尺寸属性都放大2倍，再利用 scale(0.5) 缩小为原来的一半。
- 优点：可以同时解决 0.5px border 问题，省的再添加一个伪类
- 缺点：缩小后的元素还是占据原来元素的大小空间，可以通过 transform-origin 选择缩放后的定位 + 父元素固定大小后 overflow：hidden 解决。

常见的例子是购物车图标

两个 div，只缩小字体

<div v-if="cartNum>=1" class="cartData">  //红色框
     <div class="Num" v-if="cartNum>=1&&cartNum<=99">{{cartNum}}</div>  //数字
     <div class="Num" v-else-if="cartNum>99">99+</div>
</div>

.cartData{
    height: .75rem;           //rem 响应式设置字体大小，相对单位，相对根元素的font-size
    min-width: .75rem;
    border-radius: .375rem;
    background: red;
    color: white;
    text-align: center;
    line-height: .75rem;
  }
.Num{
    font-size: 20px;                //font-size缩小为10px
    transform: scale(0.5);
    transform-origin: 100% 100%;
    // 解决兼容性问题
    -webkit-transform: scale(0.5);
    -webkit-transform-origin: 100% 100%;
}

整个盒子放大缩小

<div v-if="cartNum>=1&&cartNum<=99" class="cartData">{{cartNum}}</div>
<div v-else-if="cartNum>99" class="cartData">99+</div>

.cartData{
    height: 1.5rem;           //rem 响应式设置字体大小，相对单位，相对根元素的font-size
    min-width: 1.5rem;
    border-radius: .75rem;
    background: red;
    color: white;
    text-align: center;
    line-height: 1.5rem;
    font-size: 20px;           //font-size缩小为10px
    border: 1px solid #000;    //缩小后为border：0.5px 
    transform: scale(0.5);
    transform-origin: 100% 100%;  //缩放后的定位：top、left、right、bottom，百分比……
    // 解决兼容性问题
    -webkit-transform: scale(0.5);
    -webkit-transform-origin: 100% 100%;
}

2、 `SVG` 矢量图设置text

除了常用的 transform: scale(0.5)，还可以通过使用 SVG 矢量图设置 <text>

优点： 1px-12px 任意字号均可设置，可对设计界面进行对齐调整
缺点：不支持多行文本（svg 不支持换行）

步骤：

在 svg 包含 text 标签，给 svg 设置合适的宽高，文本内容写在 text 标签中；
text 标签的 x、y 值这里必须用到的，x 值表示文字左下角开始的 x 坐标；y 值表示文字左下角开始的 y 坐标，一般文本显示都是左对齐，所以 x 值为 0， y 值为字号大小（0 的话文字显示不出来）；
text 文本设置样式的方法和普通标签设置的方法不一样，例如文本颜色填充是用 fill 设置，并不是color；其他的标签大家有兴趣可以深入了解一下。

<div>我是最小12px字体大小 hello world！</div>
<svg>
    <text x="0" y="10">我是10px字体大小 hello world！</text>>
</svg>

div{font-size: 12px;}
svg{
   width: 100px;   // 需要根据实际情况调整
   height: 100px;  // 需要根据实际情况调整
   background-color: red;
}
svg text{font-size: 10px;}

二、边框 0.5 px的解决方案：伪类

单条边框可有两种方式：1. 直接缩小需要缩小的边；2. 移动放大后整体一起缩小。

1. 单条边框(上边框或者下边框)

上边框，设置 top: 0；　　下边框，设置 bottom: 0

.box {
    position: relative;
}
.box::after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 1px;
    transform: scaleX(0.5);   //直接缩小需要缩小的边，如果是左右边框缩小Y轴
    -webkit-transform: scaleX(0.5);  
}

2. 单条边框(左或右边框)

左边框，设置 left: 0；　　右边框，设置 right: 0

.box {
    position: relative;
}
.box::after {
    content: '';
    display: block;
    position: absolute;
    right: 0;
    top: -50%;              //与上面不同，这个先移动
    width: 1px;
    height: 200%;           //放大
    transform: scale(0.5);  //再缩小
    -webkit-transform: scale(0.5);  
}

3. 四条边框

.box {
    position: relative;
}
.box::after {
    content: '';
    display: block;
    position: absolute;
    left: -50%;        /*根据实际情况微调*/
    top: -50%;         /*根据实际情况微调*/
    width: 200%;
    height: 200%;
    border: 1px solid red;
    transform: scale(0.5);
    -webkit-transform: scale(0.5);  
}

　　　　top: -50%；left: -50% 的效果　　　　　　　　top: -54%；left: -50.5% 的效果

原则上应该设置 top: -50%，left: -50% 的，但是设置之后会发现边框有点靠右下角，所以可根据实际情况进行微调，单条边框也有这种现象，也可以进行微调。或者通过 transform-origin 去定位缩小的位置。

.box1 {
    position: relative;
}
.box1::before {
    content: '';
    display: block;
    position: absolute;
    right: 0;    //也可以是 left，不过要注意 transform-origin 要写对
    top: 0;      //也可以是 bottom，不过要注意 transform-origin 要写对
    width: 200%;
    height: 200%;
    border: 1px solid red;
    transform: scale(0.5);
    transform-origin: top right;  //absolute后面的两个属性是什么这里就是什么
}

如何实现字体小于 12px 以及边框 0.5 px？