CSSFonts(字体)属性用于定义字体系列、大小、粗细、和文字样式(如斜体)。
字体
CSS使用font-family属性定义文本的字体系列。
语法
p{font-family:"微软雅黑";}
div{font-family:Arial,"Microsoft Yahei","微软雅黑";}
在同一选择器内使用了多个字体的情况下,运行时会优先以排在前面的字体显示页面内容,如果电脑上没有安装相应的字体插件,则显示排在后面的字体,以此类推。如果选择的字体全部没有安装则显示浏览器默认的字体。
注意:
- 各种字体之间必须用英文逗号隔开;
- 一般情况下,如果有空格隔开的多个单词组成的字体,需要加引号(单引号或双引号都可以);
- 尽量使用系统自带字体,保证在任何用户的浏览器中都能正确显示。
示例
尝试按照提示把字体分别设置为宋体和微软雅黑。
<style>
h2{
font-family: "宋体";
}
p{
font-family: "微软雅黑";
}
</style>
......
<h2>这是宋体</h2>
<p>这是微软雅黑</p>
运行效果:
字体大小
CSS使用font-size属性定义字体大小。
语法
body{
font-size:30px;
}
px是我们网页最常用的单位,即像素大小。不同的浏览器可能默认显示的字号大小不一致,我们尽量给一个明确的大小,不要默认大小。
注意:标题标签比较特殊,需要单独指定文字大小。
示例
把标题标签与段落标签内的字号改成16px。
<style>
body{
font-size: 16px;
}
h2{
font-size: 16px;
}
</style>
运行效果:
字体粗细
CSS使用font-weight属性设置文字字体的粗细,该属性的默认值为normal。
语法
p{
font-weight:bold;
}
属性值
其中比较提倡使用的是number
p{
font-size:300;
}
需要注意的是,在表示字体粗细时,数字后面不需要加单位px。
示例
<head>
<title>字体粗细</title>
<style>
.normal{
font-weight: normal;
}
.bold{
font-weight: bold;
}
.bolder{
font-weight: bolder;
}
.lighter{
font-weight: lighter;
}
.number{
font-weight: 300;
}
</style>
</head>
<body>
<p class="normal">normal</p>
<p class="bold">bold</p>
<p class="bolder">bolder</p>
<p class="lighter">lighter</p>
<p class="number">number:300</p>
</body>
运行效果
文字样式
CSS使用font-style属性设置文本的风格。
语法
p{
font-style:normal;
}
字体复合属性
字体属性可以把文字样式综合来写,这样可以更节约代码。
示例
我需要把段落标签p的文字,变粗 颜色为蓝色 字号设置为30px 字体为宋体 文字变倾斜。
p{
color: #0000FF;
/*复合属性即简写方式,需要按照以下特定的方式书写.*/
/*font:font-style font-weight font-size/line-height font-family;*/
font:italic 700 30px "宋体";
}
line-height表示行高,在后面会讲到,在简写中可以省略不写。
注意:
-
属性的顺序一定要按照要求的来,不能随意变换顺序;
-
属性值之间需要用空格隔开;
-
不需要的属性可以省略不写,但是font-size和font-family属性必须保留,否则简写将不起作用。
运行效果: