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>
HTML5和CSS3实现3D展示商品信息的代码
利用HTML5中的Canvas绘制笑脸的代码
Html5移动端获奖无缝滚动动画实现