目录
# 一、字体小于 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: 0.75rem; //rem 响应式设置字体大小，相对单位，相对根元素的font-size
min-width: 0.75rem;
border-radius: 0.375rem;
background: red;
color: white;
text-align: center;
line-height: 0.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: 0.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% 的，但是设置之后会发现边框有点靠右下角，所以可根据实际情况进行微调，单条边框也有这种现象，也可以进行微调。或者通过 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后面的两个属性是什么这里就是什么
}
已复制