CSS 字体属性定义文本的字体系列、大小、加粗、风格(如斜体)和变形(如小型大写字母)。
1、font-style 属性,字体风格,最常用于规定斜体文本。
- normal - 文本正常显示
- italic - 文本斜体显示
- oblique - 文本倾斜显示
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
快捷键
- fs
font-style: italic;
- fsn
font-style: normal;
2、font-weight 属性,字体粗细,设置文本的粗细。
值 | 描述 |
---|---|
normal | 默认值。定义标准的字符。 |
bold | 定义粗体字符。 |
bolder | 定义更粗的字符。 |
lighter | 定义更细的字符。 |
100 200 300 400 500 600 700 800 900 | 定义由粗到细的字符。400 等同于 normal,而 700 等同于 bold。 |
inherit | 规定应该从父元素继承字体的粗细。 |
快捷键
- fw
font-weight:;
- fwb
font-weight: bold;
- fwbr
font-weight: bolder;
3、font-size 属性
,字体大小,设置文本的大小。
注意:如果您没有规定字体大小,普通文本(比如段落)的默认大小是 16 像素 (16px=1em)。
使用像素来设置字体大小
font-size:60px;
h2 {font-size:40px;}
p {font-size:14px;}
像素转换公式为 em:pixels/16=em
h1 {font-size:3.75em;} /* 60px/16=3.75em */
结合使用百分比和 EM
在所有浏览器中均有效的方案是为 body 元素(父元素)以百分比设置默认的 font-size 值:
body {font-size:100%;}
h1 {font-size:3.75em;}
h2 {font-size:2.5em;}
p {font-size:0.875em;}
4、font-family 属性
,指定字体系列,定义文本的字体系列。
注意点:
- 如果取值是中文, 需要用双引号或者单引号括起来
- 设置的字体必须是用户电脑里面已经安装的字体
快捷键:fffont-family:;
格式:font-family:"楷体";
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
/* font-style:
取值: italic 倾斜 , normal 正常
快捷键
fs:font-style: italic;
fsn:font-style: normal;
*/
font-style: italic;
/*
font-weight:
快捷键:
fw: font-weight:;
*/
font-weight: bold;
/* font-size: 字号
快捷键:
fsz: font-size:
fsz12:font-size: 12px;
*/
font-size:20px;
/*
font-family: 字体 备选字体1 备选字体2
指定的字体如果没有安装在电脑上,就默认使用宋体
*/
font-family: "楷体" ;
}
</style>
</head>
<body>
<p>床前明月光</p>
<p>疑是地上霜</p>
<p>举头望明月</p>
<p>低头思故乡</p>
</body>
![](https://img.haomeiwen.com/i815267/99d1020ab7c3cf59.png)
5、字体属性的简写
缩写格式:font: style weight size family;
size family 不可省略,不可颠倒顺序,必须放在最后
style weight 可以省略,可以调整顺序
网友评论