CSS-字体的其他样式

王十四兄

已于 2023-01-02 14:30:21 修改

阅读量232

点赞数 1

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

于 2022-11-06 18:12:19 首次发布

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

版权

css 专栏收录该内容

44 篇文章 1 订阅

订阅专栏

文章目录

字体的其他样式

字体的其他样式

<!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

font-style 可以用来设置字体的斜体
可选值：
- normal 默认值，文字正常显示
- italic 文字会以斜体显示
- oblique 文字会以倾斜的效果显示
大部分浏览器都不会对倾斜和斜体做区分，
- 也就是说我们设置 italic 和 oblique 他们的效果往往是一样的
一般我们只会使用 italic

.p1 {
  font-style: oblique;
}

2. font-weight

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

.p1 {
  font-weight: bold;
}

3. font-variant

font-variant 可以用来设置小型大写字母
可选值：
- normal 默认值，文字正常显示，
- small-caps 文字以小型大写字母显示
小型大写字母：
- 将所有的字母都以大写形式显示，但是小写字母的大写
- 要比大写字母的大小要小一些。

.p1 {
  font-variant: small-caps;
}

4. font

在 CSS 中还为我们提供了一个样式叫 font，
- 使用该样式可以同时设置字体相关的所有样式，
- 可以将字体的样式的值，统一写在 font 样式中，不同的值之间使用空格隔开
使用 font 设置字体样式时，斜体加粗小大字母没有顺序要求，甚至可写可不写
- 如果不写则使用默认值,但是要求文字的大小和字体必须写，而且字体必须是最后一个样式
- 大小必须是倒数第二个样式
- 实际上使用简写属性也会有一个比较好的性能
对比

分开设置

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

font 设置

.p3 {
  font: small-caps bold italic 60px "微软雅黑";
}

王十四兄

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS-字体的其他样式

字体的其他样式(font-style字体样式、font-weight宽度、font-variant小型大写、font简写)
复制链接

扫一扫

专栏目录