字体样式
字体样式
字体样式具有属性:字体类型、字体大小、字体粗细、字体风格、字体颜色。
font-family(字体类型)
如果不定义font-family,浏览器将会采用默认字体样式类型,也就是“宋体”。
字体样式Demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#div1 {font-family:Arial;}
#div2 {font-family: "Times New Roman";}
#div3 {font-family: "微软雅黑";}
</style>
</head>
<body>
<div id="div1">Arial</div>
<div id="div2">Times New Roman</div>
<div id="div3">微软雅黑</div>
</body>
</html>
font-size(字体大小)
字体大小Demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#p1 {font-size: 10px;}
#p2 {font-size: 15px;}
#p3 {font-size: 20px;}
</style>
</head>
<body>
<p id="p1">字体大小为10px</p>
<p id="p2">字体大小为15px</p>
<p id="p3">字体大小为20px</p>
</body>
</html>
font-weight(字体粗细)
字体粗细Demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#p1 {font-weight: 100;}
#p2 {font-weight: 400;}
#p3 {font-weight: 700;}
#p4 {font-weight: 900;}
</style>
</head>
<body>
<p id="p1">字体粗细为:100(lighter)</p>
<p id="p2">字体粗细为:400(normal)</p>
<p id="p3">字体粗细为:700(bold)</p>
<p id="p4">字体粗细为:900(bolder)</p>
</body>
</html>
font-style(字体风格)
字体风格Demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#p1{font-style:normal;}
#p2{font-style:italic;}
#p3{font-style:oblique;}
</style>
</head>
<body>
<p id="p1">字体样式为normal</p>
<p id="p2">字体样式为italic </p>
<p id="p3">字体样式为oblique</p>
</body>
</html>
color(字体颜色)
字体颜色Demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#p1{color:gray;}
#p2{color:orange;}
#p3{color:red;}
</style>
</head>
<body>
<p id="p1">字体颜色为灰色</p>
<p id="p2">字体颜色为橙色</p>
<p id="p3">字体颜色为红色</p>
</body>
</html>