css字体属性

最新推荐文章于 2024-08-04 20:38:28 发布

倔强的小白菜

最新推荐文章于 2024-08-04 20:38:28 发布

阅读量302

点赞数

分类专栏：前端基础文章标签： css

本文链接：https://blog.csdn.net/weixin_47481102/article/details/124198035

版权

前端基础专栏收录该内容

51 篇文章 2 订阅

订阅专栏

1.字体系列

css使用font-family属性定义文本系列。

p { font-family:"微软雅黑";}
div {font-family:Arial,"Microsoft YaHei","微软雅黑";}

各种字体之间必须使用英文状态下的逗号隔开
一般情况下，如果有空格隔开的多个单词组成的字体，加引号
尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示
常见的几种字体：body{font-family:"Microsoft YaHei",tahoma,arial,"Hiragno Sans GB"}

练习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体属性之字体系列</title>
    <style>
        /* 使用的是标签选择器 */
        h2 {
            font-family: "Microsoft YaHei", 'Courier New', Courier, monospace;
        }
        p {
            font-family: "Microsoft YaHei";
            font-size: 20px;
        }
    </style>
</head>
<body>
    <h2>将进酒</h2>
    <p>君不见，黄河之水天上来，奔流到海不复回。</p>
    <p>君不见，高堂明镜悲白发，朝如青丝暮成雪。</p>
    <p>人生得意须尽欢，莫使金樽空对月。</p>
    <p>天生我材必有用，千金散尽还复来。</p>
    <p>烹羊宰牛且为乐，会须一饮三百杯。</p>
    <p>岑夫子，丹丘生，将进酒，杯莫停。</p>
    <p>与君歌一曲，请君为我倾耳听。</p>
    <p>钟鼓馔玉不足贵，但愿长醉不愿醒。</p>
    <p>古来圣贤皆寂寞，惟有饮者留其名。</p>
    <p>陈王昔时宴平乐，斗酒十千恣欢谑。</p>
    <p>主人何为言少钱，径须沽取对君酌。</p>
    <p>五花马，千金裘，呼儿将出换美酒，与尔同销万古愁。</p>
</body>
</html>

2.字体大小

css使用font-size属性定义字体大小。

p {
    font-size:20px;
}

px(像素）大小是我们网页的最常见的单位
谷歌浏览器默认的文字大小为16px
不同浏览器可能默认显示的字号大小不一致，气门尽量给一个明确值大小，不要默认大小
可以给body指定整个页面文字的大小

练习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体属性之字体大小</title>
    <style>
        body {
            font-size: 20px;
        }
        /* 标题标签比较特殊，需要单独指定文字大小 */
        h2 {
            font-size: 20px;
        }
    </style>
</head>
<body>
    <h2>将进酒</h2>
    <p>君不见，黄河之水天上来，奔流到海不复回。</p>
    <p>君不见，高堂明镜悲白发，朝如青丝暮成雪。</p>
    <p>人生得意须尽欢，莫使金樽空对月。</p>
    <p>天生我材必有用，千金散尽还复来。</p>
    <p>烹羊宰牛且为乐，会须一饮三百杯。</p>
    <p>岑夫子，丹丘生，将进酒，杯莫停。</p>
    <p>与君歌一曲，请君为我倾耳听。</p>
    <p>钟鼓馔玉不足贵，但愿长醉不愿醒。</p>
    <p>古来圣贤皆寂寞，惟有饮者留其名。</p>
    <p>陈王昔时宴平乐，斗酒十千恣欢谑。</p>
    <p>主人何为言少钱，径须沽取对君酌。</p>
    <p>五花马，千金裘，呼儿将出换美酒，与尔同销万古愁。</p>
</body>
</html>

3.字体粗细

css使用font-weight属性设置文本的粗细。

p {
    font-weight:bold;
}

学会让加粗标签（如h或strong等）不加粗，或者其他标签加粗
实际开发中，更喜欢使用数字表示粗细

练习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体属性之文字粗细</title>
    <style>
        h2  {
            /* normal : 正常的字体。相当于number为400。 */
            /* font-weight: 400; */
            font-weight: normal;
        }
        /* 这个700 的后面不要跟单位 等价于bold  都是加粗效果            */
        /* 实际开发中,我们更提倡使用数字  表示加粗或变细 */
        /* p {
            font-weight: 700;
        } */
        .bold  {
            font-weight: bold;
        }
        .bolder {
            font-weight: bolder;
        }
        .lighter {
            font-weight: lighter;
        }
    </style>
</head>
<body>
    <h2>将进酒</h2>
    <p>君不见，黄河之水天上来，奔流到海不复回。</p>
    <p>君不见，高堂明镜悲白发，朝如青丝暮成雪。</p>
    <p>人生得意须尽欢，莫使金樽空对月。</p>
    <p>天生我材必有用，千金散尽还复来。</p>
    <p>烹羊宰牛且为乐，会须一饮三百杯。</p>
    <p>岑夫子，丹丘生，将进酒，杯莫停。</p>
    <p>与君歌一曲，请君为我倾耳听。</p>
    <p>钟鼓馔玉不足贵，但愿长醉不愿醒。</p>
    <p>古来圣贤皆寂寞，惟有饮者留其名。</p>
    <p class="bold">陈王昔时宴平乐，斗酒十千恣欢谑。</p>
    <p class="bolder">主人何为言少钱，径须沽取对君酌。</p>
    <p class="lighter">五花马，千金裘，呼儿将出换美酒，与尔同销万古愁。</p>
</body>
</html>

4.文字样式

css使用font-style属性设置文本的风格。

p {
    font-style:normal;
}

注意：平时我们很少给文字家斜体，反而是斜体标签（em,i）改为不倾斜字体

练习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体属性之文字样式</title>
    <style>
        p {
            /* italic : 斜体。让不倾斜的字体倾斜 */
            font-style: italic;
        }
        /* font-style: normal  让倾斜的字体不倾斜 */
        em {
            font-style: normal;
        }
        i {
            font-style: normal;
        }
    </style>
</head>
<body>
    <!-- <p></p>  是段落标签 -->
    <p>君不见，黄河之水天上来，奔流到海不复回。</p>
    <!-- <em></em> <i></i> 是文本格式化标签中的倾斜 -->
    <!-- <br> 是换行标签 强制换行 -->
    <em>君不见，高堂明镜悲白发，朝如青丝暮成雪。</em> <br />
    <i>人生得意须尽欢，莫使金樽空对月。</i>
</body>
</html>

5.字体复合属性

字体属性可以把以上文字样式综合来写，这样可以更节约代码：

body{
    font：font-style  font-weight  font-size/line-height  font-family;
}

使用font属性时，必须按照上面语法格式中的顺序书写，不能随意更换顺序，并且各个属性间以空格合开
不需要设置的属性可以忽略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用

练习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体属性之字体复合属性</title>
    <style>
        /* 想要文字变倾斜 加粗 字号设置为20像素 并且是微软雅黑 */
        p {
            /* font-style: italic;
            font-weight: 700;
            font-size: 20px;
            font-family: 'Microsoft yahei'; */
            /* 以上代码繁琐 可以使用字体复合属性 */
            /* 复合属性:简写的方式 节约代码  代码如下*/
            /* font: font-style font-weight font-size/line-height font-family; */
            /* font: italic 700 20px 'Microsoft yahei'; */
            /* 使用字体复合属性时,语法书写不能更换位置,属性之间必须使用空格隔开
            不需要设置的属性可以省略(取默认值),但是必须保留font-size和font-family属性,否则属性将不起作用 
            如下:font-style font-weight line-height已被省略*/
            /* font: 20px 'Microsoft yahei';    */
            /*下面代码为错误示范: font-size被省略  font属性比起作用 */
            font:  'Microsoft yahei';
        }
    </style>
</head>
<body>
    <p>君不见，黄河之水天上来，奔流到海不复回。</p>
    <p>君不见，高堂明镜悲白发，朝如青丝暮成雪。</p>
</body>
</html>

6.总结

倔强的小白菜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css字体属性

1.字体系列css使用font-family属性定义文本系列。p { font-family:"微软雅黑";}div {font-family:Arial,"Microsoft YaHei","微软雅黑";}各种字体之间必须使用英文状态下的逗号隔开一般情况下，如果有空格隔开的多个单词组成的字体，加引号尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示常见的几种字体：body{font-family:"Microsoft YaHei",tahoma,arial,"Hir
复制链接

扫一扫

专栏目录