CSS-font字体详解

置顶

王十四兄

已于 2023-01-01 14:58:14 修改

阅读量2.4k

点赞数 3

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

于 2022-11-21 20:13:48 首次发布

本文链接：https://blog.csdn.net/weixin_64933233/article/details/127971611

版权

字体的样式

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
      .p1 {
     
        font-size: 30px;
        font-family: "curlz mt";
      }
    </style>
  </head>
  <body>
    <p class="p1">我是一个p标签，ABCDEFGabcdefg</p>
  </body>
</html>

请添加图片描述

1. 字体颜色

设置字体颜色,使用 color 来设置文字的颜色

.p1 {
   
  color: red;
}

2. 文字大小

设置文字的大小,浏览器中一般默认的文字代销都是 16px
- font-size 设置的并不是文字本身的大小，
在页面中，每个文字都是处在一个看不见的框中的
- 我们设置的 font-size 实际上是设计的格的高度，并不是字体的大小
一般情况下文字都要比格要小一些，也有时会比格大
- 根据字体不同，显示效果也不同

.p1 {
   
  font-size: 30px;
}

3. 字体

通过 font-family 可以指定文字的字体
当采用某种字体时，如果浏览器支持使用该字体，
- 如果字体不支持，则使用默认字体
该样式可以同时指定多个字体，多个字体之间使用,分开
- 当采用多个字体时，浏览器会优先使用前边的字体，
- 如果前边没有再尝试下一个

.p1 {
   
  font-family: arial, 微软雅黑;
}

浏览器使用的字体默认就是计算机中的字体，
- 如果计算机中有，则使用，如果没有就不用
在开发中，如果字体太奇怪，用的太少了，尽量不要使用，
- 有可能用户的电脑里没有，就不能达到想要的效果，

.p1 {
   
  /*font-family: 华文彩云 , arial , 微软雅黑;*/
  font-family: "curlz mt";
}

字体的其他样式

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
      .p1 {
     
        color: red;
        font-size: 30px;
        font-family: "微软雅黑";
        font-style: oblique;

        font-weight: bold;
        font-variant: small-caps;
      }

      .p2 {
     
        /*设置一个文字大小*/
        font-size: 50px;
        /*设置一个字体*/
        font-family: 华文彩云;
        /*设置文字的斜体*/
        font-style: italic;
        /*设置文字的加粗*/
        font-weight: bold;
        /*设置一个小型大写字母*/
        font-variant: small-caps;
      }

      .p3 {
     
        font: small-caps bold italic 60px "微软雅黑";
      }
    </style>
  </head>
  <body>
    <p class="p3">我是一段文字，ABCDEFGabcdefg</p>

    <p class="p1">我是