06-CSS字体属性

最新推荐文章于 2024-07-30 10:27:19 发布

「已注销」

最新推荐文章于 2024-07-30 10:27:19 发布

阅读量120

点赞数

文章标签： css html css3 javascript html5

本文链接：https://blog.csdn.net/weixin_45029643/article/details/119698762

版权

CSS字体属性

px 像素，是我们网页中最常用的单位。
Google Chrome 浏览器的默认文字大小为16px。
不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要用默认大小。
可以给 <body></body> 指定整个页面文字的大小，然后再根据实际情况对指定的元素进行修改。

字体粗细

CSS使用 font-weight 属性设置文本字体的粗细。
normal : 不加粗，默认值，等于 500
bold : 加粗，等于 700

p {
    font-weight: bold;  
}
h1 {
    font-weight: 400;
}

文字样式

CSS 使用 font-style 属性设置文本的风格。
normal : 默认值，不倾斜
italic : 斜体

p {
    font-style: italic;
}

字体的复合属性

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

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

特点：
1. 使用 font 属性时，必须按上面语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开。
2. 不需要设置的属性可以省略(去默认值)，但是必须设置 font-size 和 font-family ，否则 font 属性将不起作用。

示例：

<!DOCTYPE html>
<html lang="zh-CN">

<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: italic bold 20px "Microsoft YaHei";
        }
    </style>
</head>

<body>

    <p>床前明月光，疑是地上霜。</p>
    <p>举头望明月，低头思故乡。</p>


</body>

</html>

字体复合属性

总结

属性	表示	注意点
font-size	字号	一定要跟上单位，通常使用的是px像素。
font-family	字体	实际开发中按照团体约定来定义字体。
font-weight	字体粗细	加粗是bold或700，不加粗是normal或400，数字不要跟单位。
font-style	字体样式	倾斜是italic，不倾斜是normal。
font	复合属性	属性有顺序，不能更换位置，字号和字体必须同时出现，缺一不可。

「已注销」

关注

0
点赞
踩
0

收藏

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

CSS字体属性字体大小CSS 使用 font-size 属性定义文字大小。p { font-size: 20px;}px 像素，是我们网页中最常用的单位。Google Chrome 浏览器的默认文字大小为16px。不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要用默认大小。可以给 <body></body> 指定整个页面文字的...
复制链接

扫一扫