首页 前端知识 CSS-字体样式

CSS-字体样式

2024-04-30 11:04:14 前端知识 前端哥 391 681 我要收藏

文章目录

  • 字体的样式
    • 1. 字体颜色
    • 2. 文字大小
    • 3. 字体
  • 字体的其他样式
    • 1. font-style
    • 2. font-weight
    • 3. font-variant
    • 4. font

字体的样式

<!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. 文字大小

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

3. 字体

  1. 通过 font-family 可以指定文字的字体
  2. 当采用某种字体时,如果浏览器支持使用该字体,
    • 如果字体不支持,则使用默认字体
  3. 该样式可以同时指定多个字体,多个字体之间使用,分开
    • 当采用多个字体时,浏览器会优先使用前边的字体,
    • 如果前边没有再尝试下一个
.p1 {
  font-family: arial, 微软雅黑;
}
  1. 浏览器使用的字体默认就是计算机中的字体,
    • 如果计算机中有,则使用,如果没有就不用
  2. 在开发中,如果字体太奇怪,用的太少了,尽量不要使用,
    • 有可能用户的电脑里没有,就不能达到想要的效果,
.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">我是一段文字,ABCDEFGabcdefg</p>

    <p class="p2">我是一段文字,ABCDEFGabcdefg</p>
  </body>
</html>

请添加图片描述

1. font-style

  1. font-style 可以用来设置字体的斜体
  2. 可选值:
    • normal 默认值,文字正常显示
    • italic 文字会以斜体显示
    • oblique 文字会以倾斜的效果显示
  3. 大部分浏览器都不会对倾斜和斜体做区分,
    • 也就是说我们设置 italic 和 oblique 他们的效果往往是一样的
  4. 一般我们只会使用 italic
.p1 {
  font-style: oblique;
}

2. font-weight

  1. font-weight 可以用来设置文本的加粗效果
  2. 可选值:
    • normal 默认值,文字正常显示
    • bold 文字加粗显示
  3. 该样式也可以指定 100-900 之间的 9 个值
    • 但是由于用户的计算机中往往没有这么多级别的字体,所以达不到我们想要的效果
    • 也就是 200 有可能比 100 粗,300 有可能比 200 粗,但是也可能是一样的
.p1 {
  font-weight: bold;
}

3. font-variant

  1. font-variant 可以用来设置小型大写字母
  2. 可选值:
    • normal 默认值,文字正常显示,
    • small-caps 文字以小型大写字母显示
  3. 小型大写字母:
    • 将所有的字母都以大写形式显示,但是小写字母的大写
    • 要比大写字母的大小要小一些。
.p1 {
  font-variant: small-caps;
}

4. font

  1. 在 CSS 中还为我们提供了一个样式叫 font,
    • 使用该样式可以同时设置字体相关的所有样式,
    • 可以将字体的样式的值,统一写在 font 样式中,不同的值之间使用空格隔开
  2. 使用 font 设置字体样式时,斜体 加粗 小大字母 没有顺序要求,甚至可写可不写
    • 如果不写则使用默认值,但是要求文字的大小和字体必须写,而且字体必须是最后一个样式
    • 大小必须是倒数第二个样式
    • 实际上使用简写属性也会有一个比较好的性能
  3. 对比
  • 分开设置
.p2 {
  /*设置一个文字大小*/
  font-size: 50px;
  /*设置一个字体*/
  font-family: 华文彩云;
  /*设置文字的斜体*/
  font-style: italic;
  /*设置文字的加粗*/
  font-weight: bold;
  /*设置一个小型大写字母*/
  font-variant: small-caps;
}
  • font 设置
.p3 {
  font: small-caps bold italic 60px "微软雅黑";
}
转载请注明出处或者链接地址:https://www.qianduange.cn//article/6674.html
评论
会员中心 联系我 留言建议 回顶部
复制成功!