前端 html 实现字体大小小于12px

一碗猪肉牛杂汤

已于 2022-12-17 14:55:28 修改

阅读量2.7k

点赞数 1

分类专栏： html 文章标签：前端 html css

于 2022-12-10 18:30:32 首次发布

本文链接：https://blog.csdn.net/weixin_45061726/article/details/128267233

版权

html 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

前端 html 实现字体大小小于12px

设置字体大小小于12px，可利用CSS3中的tranform转换属性设置容器的缩放。

<!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>字体大小小于12px</title>
  <style>
      /* 需求：
          ①container容器内字体大小小于12px
          ②第一个a标签靠最左边
          ③第三个a标签靠最右边
          ④剩余空间平分并居中*/
      /* 
      已知 父节点总宽度为260px，高度与内容高度一致
      步骤：
          1.先将 container 容器内的内容按照需求排列好，a标签两边对齐，剩余的居中对齐
          2.设置a标签的字体大小为12px
          3.使用tranform: scale(0.8)缩放为原来容器的0.8倍大小
          4.缩放需要按照左上角缩放，不要按照容器的中心点缩放 ==>使用transform-origin: 0px 0px;
          5.将container 容器的宽度必须为 父容器的宽度 / 0.8 = 260 / 0.8 =  325px
          注意：为什么container 容器必须为父容器宽度除以0.8呢？
          因为tranform: scale(0.8) 属性是对容器的缩放，容器变小，字体也会变小，宽度也会变小，所以想要保持之前的排列方式，总宽度保持不变，缩放后的宽度必须为260px，排列方式才不会
          被改变
      */
      .parent {
          width: 260px;
          background-color: #F5F5F5;
          border: 1px solid black;
      }
      .container {
          display: flex;
          justify-content: space-between;
          width: 325px;
          font-size: 12px;
          /* 缩放为原来的0.8倍 */
          transform: scale(0.8);
          /* 按照容器的左上角缩放 */
          transform-origin: 0px 0px;
     }
  </style>
</head>
<body>
  <div class="parent">
      <div class="container">
          <a href="###">沪深A</a>
          <a href="###">半导体</a>
          <a href="###">汽车之家</a>
      </div>
  </div>
</body>
</html>

需要注意：tranform: scale(0.8)缩放默认是按照容器的中心点向里缩小，且宽度和高度也会缩小，所以需要转换中心点为左上角，且需要保持缩小后的宽度与原来的宽度相等。
在这里插入图片描述
a标签的样式没有调，可以自己调试。

需求：
      ①container容器内字体大小小于12px
      ②第一个a标签靠最左边
      ③第三个a标签靠最右边
      ④剩余空间平分并居中
  已知 父节点总宽度为260px，高度与内容高度一致
  步骤：
      1.先将 container 容器内的内容按照需求排列好，a标签两边对齐，剩余的居中对齐
      2.设置a标签的字体大小为12px
      3.使用tranform: scale(0.8)缩放为原来容器的0.8倍大小
      4.缩放需要按照左上角缩放，不要按照容器的中心点缩放 ==>使用transform-origin: 0px 0px;
      5.将container 容器的宽度必须为 父容器的宽度 / 0.8 = 260 / 0.8 =  325px
      注意：为什么container 容器必须为父容器宽度除以0.8呢？
      因为tranform: scale(0.8) 属性是对容器的缩放，容器变小，字体也会变小，宽度也会变小，所以**想要保持之前的排列方式，总宽度保持不变，缩放后的宽度必须为260px，排列方式才不会**
      被改变