设置比12px更小字体

总萌大人

于 2024-07-18 19:04:56 发布

阅读量475

点赞数 9

文章标签：前端 html javascript

本文链接：https://blog.csdn.net/2301_76917834/article/details/140530541

版权

1.transform.scale()

优点是单行、多行文本都可使用。需将文本嵌套在块标签内（如<div>），因为缩放只对有宽高的标签有效。给文本设置字体为 12px，并根据需要计算缩放值，如设置为 8px 时，缩放值为 8÷12≈0.66666，即 transform:scale(0.66666)；若要设置为 10px，则缩放值为 10÷12≈0.83333，即 transform:scale(0.83333) 。同时，设置 transform-origin:0 0 改变缩放中心点实现左对齐（若需右对齐或有缩进，可改变对应的参数值），并添加 white-space:nowrap 强制文本在一行显示

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>document</title>
    <style>
     

      .box1 {
            font-size: 12px;
        }

      .box2 {
            font-size: 10px;
            transform: scale(0.83333);
            transform-origin: 0 0;
            white-space: nowrap;
        }
        .box3 {
            font-size: 10px;
        }
    </style>
</head>
<body>
    <div class="box1">我是正常的 12px 的文字大小</div>
    <div class="box2">我是10px 的文字大小 tranform:scale()</div>
    <div class="box3">我是正常的 10px 的文字大小</div>
</body>
</html>

2.使用 svg 矢量图设置 text

SVG 是一种矢量图格式，通过在 SVG 中包含<text>标签，并设置其相关属性，可以实现任意小的字号。优点是可以设置 1px 到 12px 之间的任意字号，并且能够根据设计需求进行对齐调整；缺点是不支持多行文本。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <svg width="97.515625" height="11.52">
        <text
          dominant-baseline="baseline"
          font-size="10" 
          y="9.52" 
          style="line-height:1;vertical-align: middle;"
        >
          云南白药yyds
        </text>
      </svg>
</body>
</html>