<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS中常用的字体样式属性及其注意事项</title>
<style type="text/css">
/*
CSS（Cascading Style Sheets，级联样式表）样式规则
语法：
选择器 {属性1: 值1; 属性2: 值2; ...}
注意：
1 属性与相应的值组成一个“键值对”，
我们也称这样的一个“键值对”为一个“声明”
2 属性与相应的值之间使用英文状态下的冒号“:”分隔
3 多个“键值对”（“声明”）之间使用英文状态下的分号“;”隔开
*/
p {
/*
一、设置字号，使用属性font-size
注意：
1. 推荐使用相对长度单位，比如像素单位px
2. 网页中普遍使用14px+
3. 尽量使用偶数的数字字号
IE6等老式浏览器在支持奇数的数字字号时会有bug
*/
font-size: 24px;
/*
二、设置字体，使用属性font-family
注意：
1. 中文字体名必须加英文状态下的引号
（单引号“''”、双引号“""”都可）
2. 可以指定多个字体，但多个字体名之间
必须使用英文状态下的逗号隔开
3. 英文字体名必须位于中文字体名之前
4. 浏览器如果不支持第一个字体，则会尝试下一个，
直到找到合适的字体
5. 如果字体名中包含空格、#、$等符号，
则必须加英文状态下的引号
（单引号“''”、双引号“""”都可）
*/
font-family: Cambria, "Times New Roman", '宋体';
/*
三、设置字体粗细，使用属性font-weight
注意，其可用属性值有两种形式：
1. 单词形式
直接使用相应的英文单词来表示粗细，具体有4个：
lighter、normal、bold、bolder
提示：具体实践中发现bold与bolder的加粗效果似乎一样
2. 数字形式
取100~900之间100的整数倍，具体有9个，分为三组：
100~300对应单词形式中的lighter
400~500对应单词形式中的normal
600~900对应单词形式中的bold、bolder
提示：具体实践中发现取600~900之间的数值时
加粗效果似乎一样，
于是将600~900之间的数值对应于bold与bolder
小技巧：
在实际开发中，更喜欢使用数字来表示字体的粗细，
比如，使用400表示normal，使用700表示bold
*/
font-weight: 700;
/*
四、设置字体风格，使用属性font-style
其可用属性值有3个：
1. normal：默认值，浏览器会显示标准的字体样式
2. italic：浏览器会显示斜体的字体样式
3. oblique：浏览器会显示倾斜的字体样式
*/
font-style: italic;
/*
五、综合设置字体样式（重点），使用属性font
语法：
font: font-style font-weight font-size font-family;
注意：
1. 使用font属性时，必须按上面语法格式中的顺序书写，
不能更换顺序
2. 各个属性值以空格隔开
3. 其中不需要设置的属性可以省略不写，
但必须保留font-size属性和font-family属性，
否则font属性将不起作用
*/
font: oblique 44px Calibri;
}
</style>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
10-12
1107
1107
03-25
1万+
1万+
“相关推荐”对你有帮助么？
-
非常没帮助 -
没帮助 -
一般 -
有帮助 -
非常有帮助
提交
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
