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

·  阅读 7376

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

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

使用方法有两种:

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

常见的例子是购物车图标

                   

  1. 两个 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%;
}
复制代码
  1. 整个盒子放大缩小
<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 不支持换行)

步骤:

  1. 在 svg 包含 text 标签,给 svg 设置合适的宽高,文本内容写在 text 标签中;

  2. text 标签的 x、y 值这里必须用到的,x 值表示文字左下角开始的 x 坐标;y 值表示文字左下角开始的 y 坐标,一般文本显示都是左对齐,所以 x 值为 0, y 值为字号大小(0 的话文字显示不出来);

  3. 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后面的两个属性是什么这里就是什么
}
复制代码
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改