前端学习DAY21（字体的其他样式）

最新推荐文章于 2025-07-07 15:00:30 发布

麦子爱种地

最新推荐文章于 2025-07-07 15:00:30 发布

阅读量746

点赞数 8

CC 4.0 BY-SA版权

文章标签：学习

本文链接：https://blog.youkuaiyun.com/qq_66645900/article/details/144529710

1、font-style可以用来设置文字的斜体

可选值：normal,默认值，文字正常显示

italic 文字会以斜体显示

oblique 文字倾斜的效果显示

大部分浏览器不对倾斜和斜体做区分

也就是说我们设置italic和oblique它们的效果往往是一样的，一般用italic

    .p1{
        color: blue;
        font-size: 40px;
        font-size: "微软雅黑";
        font-style: italic;
        font-variant: small-caps;
        }

2、font-weight 可以用来设置文本的加粗效果：

可选值：Normal,默认值，文字正常显示

bold,加粗显示

改样式也可指定100~900之间的9个值，但是由于用户的计算机往往没有很多级别的字体，所以达到我们想要

的效果也即是200有可能比100粗，300有可能比200粗，但是也可能是一样的

font-weight:100;

font-weight:800;

.p2{
            color: blueviolet;
            /* 设置一个文字大小 */
            font-size: 50px;
            /* 设置一个字体 */
            font-family: '仿宋';
            /* 设置文字斜体 */
            font-style: italic;
            /* 设置文字的加粗 */
            font-weight: bolder;
            /* 设置一个小型大写字母 */
            font-variant: small-caps;
}

3、font-variant 可以用来设置小型大写字母，可选值

normal 默认值，文字正常显示

small-caps 文本以小型大写字母显示

小型大写字母：将所有的字母都以大写形式显示，但是小写字母的大写，要比大写字母尺寸小一些

在css中还为编写者提供一个样式叫font,使用该样式可以同时设置字体相关的所有样式，

可以将字体的样式的值，统一写在font样式中，不同的值之间使用空格隔开

使用font设置字体样式时，斜体加粗小大字母，没有顺序要求，甚至可写可不写

如果不写则使用默认值，但是要求文字的大小和字体必须写，且字体必须是最后一个样式

大小写必须是倒数第二个样式

错误写法没反应

 font:small-caps 60px bold italic  "华文彩云";

正确写法

 font:small-caps 60px bold italic  "华文彩云";

实际上使用简写属性也会有一个比较好的性能

  
            font: 10px;"微软雅黑" 
            font-family: "华文彩云";
            font-variant: small-caps;

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    .p1{
        color: blue;
        font-size: 40px;
        font-size: "微软雅黑";
        font-style: italic;
    }
        .p2{
            color: blueviolet;
            /* 设置一个文字大小 */
            font-size: 20px;
            /* 设置一个字体 */
            font-family: '';
            /* 设置文字斜体 */
            font-style: italic;
            /* 设置文字的加粗 */
            font-weight: bolder;
            /* 设置一个小型大写字母 */
            font-variant: small-caps ;
            /* font-weight:800; */
     }
          .p3{
             font:small-caps  bold italic 60px "华文彩云"; 
     }
        }
        
        
      
    </style>
</head>
<body>
     <p class="p1">我是一段文字，UYGDEFGEehgjfjbxsj</p>
     <p class="p2">我是一段文字，UYGDEFGEehgjfjbxsj</p>
     <p class="p3">我是一段文字，UYGDEFGEehgjfjbxsj</p>
</body>
</html>