CSS第二课 — CSS字体属性

最新推荐文章于 2025-04-10 16:10:39 发布

没人回复我哼

最新推荐文章于 2025-04-10 16:10:39 发布

阅读量340

点赞数 1

文章标签： css

本文链接：https://blog.youkuaiyun.com/qq_45645902/article/details/104746478

版权

CSS字体属性

css font属性用于定义字体系列、大小、粗细和文字样式(例如斜体)。

值	描述
font-style	规定字体样式
font-variant	规定字体异体
font-weight	规定字体粗细
font-size/line-height	规定字体尺寸和行高
font-family	规定字体系列
caption	定义被标题控件（比如按钮、下拉列表等）使用的字体
icon	定义被图标标记使用的字体
menu	定义被下拉列表使用的字体
message-box	定义被对话框使用的字体
small-caption	caption 字体的小型版本
status-bar	定义被窗口状态栏使用的字体

1、font-family

规定元素的字体系列

示例

p {
	/* Times New Roman是空格隔开的多个单词组成的字体，加引号 */
	/* 如果浏览器不支持Times New Roman字体，会尝试Georgia字体，如果仍不支持，则尝试字体系列Serif，仍不支持，则使用系统默认字体(谷歌默认微软雅黑)。 */
	font-family: "Times New Roman", Georgia, Serif;
}

用法

font-family可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。也就是说，font-family属性的值是用于某个元素的字体族名称或/及类族名称的一个优先表。浏览器会使用它可识别的第一个值。
有两种类型的字体系列名称：
- 指定的系列名称：具体字体的名称，比如：“times”、“courier”、“arial”。
- 通常字体系列名称：比如：“serif”、“sans-serif”、“cursive”、“fantasy”、“monospace”

注释：

如果字体名中包含空格、#、$、- 等符号隔开的多个单词(或汉字)，加引号(单双都可以)。
中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当需要设置英文字体时，英文字体名必须位于中文字体名之前。
尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示，始终提供一个类族名称作为最后的选择。

Unicode编码字体

把中文字体的名称用相应的Unicode编码来代替，这样就可以有效的避免浏览器解析CSS代码时候出现乱码的问题。

比如:

黑体 \9ED1\4F53
宋体 \5B8B\4F53
微软雅黑 \5FAE\8F6F\96C5\9ED1

2、font-size

设置字体的尺寸

示例

<head>
    <style>
        body {
            font-size: 20px;
        }
        /* 标题标签比较特殊，需要单独制定文字大小 */
        h2 {
            font-size: 18px;
        }
        /* 	或 font-size: n%;  设为基于父元素的一个百分比值 */
    </style>
</head>

<body>
    <h2>哈哈</h2>
    <p>你若盛开,清风自来。</p>
    <span>心若浮沉,浅笑安然。</span>
</body>

注释

px(像素)是常用单位，设置时一定要有单位。
% 是将字体尺寸设为基于父元素的一个百分比值
不同浏览器可能默认的字号大小不一致(谷歌浏览器默认的文字大小16px)，所以在写代码时尽量给一个明确的大小。
可以给body指定整个页面文字的大小(标题标签比较特殊，需要单独制定文字大小)。
实际上它设置的是字体中字符框的高度；实际的字符字形可能比这些框高或矮（通常会矮）。各关键字对应的字体必须比一个最小关键字相应字体要高，并且要小于下一个最大关键字对应的字体。
现在网页中普遍使用14px+。
尽量使用偶数的数字字号(IE6等老式浏览器使用奇数会有bug)。

3、font-weight

设置文本的粗细

值	描述
normal	默认值。定义标准的字符。相当于number的400，声明此值将取消之前的任何设置。
bold	粗体。相当于number的700，也相当于b对象的作用。
bolder	更粗
lighter	更细
number	100~900，必须是100的整数倍，值越大字体越粗，后面不要跟单位。400等同于normal，700等同于bold。

注释

实际开发中提倡使用number

4、font-style

定义字体的风格

值	描述
normal	默认值。浏览器显示一个标准的字体样式。
italic	浏览器会显示一个斜体的字体样式。
oblique	浏览器会显示一个倾斜的字体样式。

注释

平时很少给文字加斜体，常给斜体标签（em，i）改为不倾斜。
常用normal

5、line-height

设置行间的距离(行高)

值	描述
normal	默认。设置合理的行间距。
number	设置数字。number * 当前的字体尺寸。
length	设置固定的行间距。
%	基于当前字体尺寸的百分比行间距。

注释

不允许使用负值。
该属性会影响行框的布局。在应用到一个块级元素时，它定义了该元素中基线之间的最小距离而不是最大距离。
line-height与font-size的计算值之差（在 CSS 中成为“行间距”）分为两半，分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。
原始数字值指定了一个缩放因子，后代元素会继承这个缩放因子而不是计算值。优势是可以根据自己的文字大小自动调整行高。

6、复合属性写法

示例

p {
    font-style: italic;
    font-weight: 500;
    font-size: 16px;
    font-family: "微软雅黑";
}
/* 复合属性写法*/
p {
    /* font: font-style font-weight font-size/line-height font-family; */
    font: italic 500 16px/25px "微软雅黑";
}

注释

使用font属性时，必须按font-style font-weight font-size/line-height font-family顺序书写，不能更换顺序，并且各个属性之间以空格隔开。
不需要设置的属性可以省略(取默认值)，但必须保留font-size和font-family属性，否则font属性将不起作用。