CSS属性-字体 - 技术栈

前言

🦥这篇文章我们来讲解CSS中的字体属性相关的内容，本文章是基础入门相关的内容，前端老鸟请绕路。

一.font-size

🦔font-size决定文字的大小，常用的设置如下具体数值+单位也可以使用em单位(不推荐)：1em代表100%，2em代表200%，0.5em代表50%，还可以基于百分比，基于父元素的font-size计算，比如50%表示等于父元素font-size的一半。

html 复制代码

 <style>
    .text-style1 {
      font-size: 16px;
    }

    .text-style2 {
      font-size: 32px;
    }
  </style>
</head>

<body>
  <div class="text-style1">classclassclassclass</div>
  <div class="text-style2">classclassclassclass</div>
</body>

二.font-family

🐻‍❄️font-family用于设置文字的字体名称

可以设置1个或者多个字体名称;
浏览器会选择列表中第一个该计算机上有安装的字体;
或者是通过 @font-face 指定的可以直接下载的字体。

css 复制代码

@font-face {
  font-family: 'CustomFont';
  src: url('path/to/font.woff2') format('woff2'),
    url('path/to/font.woff') format('woff');
  /* 可选属性 */
  font-weight: normal;
  font-style: normal;
}

body {
  font-family: 'CustomFont', Arial, sans-serif;
}

三.font-weight

🦧font-weight用于设置文字的粗细（重量）常见的取值:

100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 ：每一个数字表示一个重量
normal：等于400
bold：等于700

html 复制代码

  <style>
    .text-style1 {
      font-weight: bold;
    }

    .text-style2 {
      font-weight: 400;
    }
  </style>

<body>
  <div class="text-style1">classclassclassclass</div>
  <div class="text-style2">classclassclassclass</div>
</body>

四.font-style

🐸font-style用于设置文字的常规、斜体显示

normal：常规显示
italic(斜体)：用字体的斜体显示(通常会有专门的字体)
oblique(倾斜)：文本倾斜显示(仅仅是让文字倾斜)

html 复制代码

 <style>
    .text-style1 {
      font-style: italic;
    }

    .text-style2 {
      font-style: oblique;
    }
  </style>

<body>
  <div class="text-style1">别等到一千年以后世界早已没有我</div>
  <div class="text-style2">无法深情挽着你的手，亲吻你额头</div>
</body>

五.font-varient

🐔font-variant可以影响小写字母的显示形式，variant是变形的意思;可以设置的值如下：

normal：常规显示
small-caps：将小写字母替换为缩小过的大写字母

html 复制代码

  .text-style1 {
      font-variant: small-caps;
  }

六.line-height

😳line-height用于设置文本的行高，行高可以先简单理解为一行文字所占据的高度，行高的严格定义是两行文字基线之间的距离，基线就是与小写字母底部对齐的线。

加入我们想实现文字在盒子内部竖直方向居中可以设置height和line-height相等。

html 复制代码

<style>
    .text-style1 {
      width: 100px;
      height: 50px;
      padding: 16px;
      background-color: antiquewhite;
      border-radius: 8px;
      line-height: 50px;
    }
</style>

<body>
  <div class="text-style1">HelloWorld</div>
</body>

七.font

🦥 font 属性可以用来作为 font-style, font-variant, font-weight, font-size, line-height 和 font-family

font-style、font-variant、font-weight可以随意调换顺序，也可以省略
line-height可以省略，如果不省略，必须跟在font-size后面
font-size、font-family不可以调换顺序，不可以省略

八.总结

🐣这篇文章我们编写了文字相关的属性内容，通过这些属性我们可以对文字进行设置，包括颜色，大小，行高，等等内容。