1.font-size : 用于设置文字的字号
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<style>
p{
font-size:30px/*字体大小为20px*/
}
</style>
</head><body>
<p>测试文本</p>
</body>
</html>
效果图:
2.font-family:用于设置字体
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<style>
p{
font-family:"微软雅黑";/*字体设置为微软雅黑*/
}
</style>
</head><body>
<p>测试文本</p>
</body>
</html>
效果图:
3.font-weight:用于定义字体粗细
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<style>
.one{
font-weight:normal;/*标准字体,默认*/
}
.two{
font-weight:bold;/*定义粗体*/
}
.three{
font-weight:bolder/*定义更粗*/
}
.four{
font-weight:lighter/*定义更细*/
}
.five{
font-weight:500/*数值取100-900;(100的整数值)定义由细到粗的字体,400等同于标准,700等同于粗体*/
}
</style>
</head><body>
<p class="one">测试文本1</p>
<p class="two">测试文本2</p>
<p class="three">测试文本3</p>
<p class="four">测试文本4</p>
<p class="five">测试文本5</p>
</body>
</html>
效果图:
4.font-style:用于定义字体分格,如斜体,倾斜的字体
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<style>
.one{
font-style: normal;/*默认值,显示为标准*/
}
.two{
font-style:italic;/*显示斜体的字体样式*/
}
.three{
font-style:oblique;/*显示倾斜的字体样式*/
}
</style>
</head><body>
<p class="one">测试文本1</p>
<p class="two">测试文本2</p>
<p class="three">测试文本3</p>
</body>
</html>
效果图:
5.font 综合属性:对字体进行综合设置
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<style>
.one{
font:italic bold 36px "微软雅黑";
}
/* 设置style:倾斜,粗体,size字号,famliy文字 */
</style>
</head><body>
<p class="one">测试文本1</p>
</body>
</html>
效果图:
6.@font-face:@font-face属性是cSS3的新增属性,用于定义服务器字体·通过@font-face属性,开发者可以在用户计算机未安装字体时,使用任何喜欢的字体。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<style>
@font-face{
font-family: 字体名称;
src:url(字体路径);
}
</style>
</head><body>
<p class="one">测试文本1</p>
</body>
</html>