03.CSS字体
2017-05-26 本文已影响0人
Lv_0
-
字体系列
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
body{
font-family: "微软雅黑",times,serif;
}
#D01,#D03,#D05{
font-family: arial;
}
</style>
</head>
<body>
<div id="D01">
<span>01</span>
</div>
<div id="D02">
<span>02</span>
</div>
<div id="D03">
<span>03</span>
</div>
<div id="D04">
<span>04</span>
</div>
<div id="D05">
<span>05</span>
</div>
</html>
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1.字体系列是有一系列字体组成的,并非单个字体;
2.为避免CSS定义字体,而用户并未安装此字体,导致显示问题,CSS定义了5种通用字体系列:
Serif 字体,Sans-serif 字体,Monospace 字体,Cursive 字体,Fantasy 字体
3.font-family属性用来指定元素的字体/字体系列;
4.为避免元素定义某种指定字体,用户未安装此字体而导致显示问题,可在最后加上一个字体系列,
系统会从前向后依次查找定义的字体,若均未找到,则遵循字体系列里的字体定义.
font-family: "微软雅黑",times,serif;
运行图片
-
字体风格
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
body{
font-family: "微软雅黑",times,serif;
font-style: normal;
}
#D01,#D05{
font-style: oblique;
}
#D03{
font-style: italic;
}
</style>
</head>
<body>
<div id="D01">
<span>01</span>
</div>
<div id="D02">
<span>02</span>
</div>
<div id="D03">
<span>03</span>
</div>
<div id="D04">
<span>04</span>
</div>
<div id="D05">
<span>05</span>
</div>
</html>
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1.字体风格以font-style属性定义;
2.字体风格默认为normal;
3.oblique和italic均未倾斜,视觉上并未太多感觉,italic是一种倾斜的风格,oblique是简单的倾斜.
运行图片
-
字体加粗
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
body{
font-family: "微软雅黑",times,serif;
font-style: normal;
font-weight: normal;
}
#D01{
font-weight: bold;
}
#D02{
font-weight: lighter;
}
#D03{
font-weight: 900;
}
#D04{
font-weight: 100;
}
</style>
</head>
<body>
<div id="D01">
<span>01</span>
</div>
<div id="D02">
<span>02</span>
</div>
<div id="D03">
<span>03</span>
</div>
<div id="D04">
<span>04</span>
</div>
<div id="D05">
<span>05</span>
</div>
</html>
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1.字体加粗以font-weight属性定义,默认值normal;
2.100~900定义了9个级别,依次加粗,其中400等于normal,700等于bold;
3.关键字有bloder比blod要更粗,lighter比light要更细.
运行图片
-
字体大小
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
body{
font-family: "微软雅黑",times,serif;
font-style: normal;
font-weight: normal;
font-size: 100%;
}
#D01{
font-size: 20px;
}
#D02{
font-size: 1.5em;
}
#D03{
font-size: 50%;
}
#D04{
font-size: 16px;
}
</style>
</head>
<body>
<div id="D01">
<span>01</span>
</div>
<div id="D02">
<span>02</span>
</div>
<div id="D03">
<span>03</span>
</div>
<div id="D04">
<span>04</span>
</div>
<div id="D05">
<span>05</span>
</div>
</html>
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1.字体大小由font-size属性设置,默认大小16px;
2.现实开发中更多使用em=pixels/父元素字体大小,默认1em=16px,em为W3C推荐使用单位;
3.实际开发中,为避免绝对大小造成的缩放不适配问题,大多采用相对大小,百分比和em的组合.
正常展示
