标签：CSS3 03 字体大小 weight 粗细 color 003 字体 font
第03章 字体样式
字体样式简介
字体样式属性：字体类型font-family、字体大小font-size、字体粗细font-weight、字体风格font-style、字体颜色color
字体类型
字体类型:未定义，默认宋体
font-family:字体1,字体2,...,字体N；
比较美观的中文字体有微软雅黑、宋体，英文字体有Times New Roman、Arial、Verdana
# font-family
<!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:像素值px;
<!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:取值;
取值有两种：一种是100~900的数值；另一种是"关键字"；
关键字取值有4个：
取值为100相当于lighter、400相当于normal、700相当于bold、900相当于bolder
<!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;}
#p5 {font-weight: lighter;}
#p6 {font-weight: normal;}
#p7 {font-weight: bold;}
#p8 {font-weight: bloder;}
</style>
</head>
<body>
<p id="p1" class="p1">字体粗细为100</p>
<p id="p2" class="p2">字体粗细为400</p>
<p id="p3" class="p3">字体粗细为700</p>
<p id="p4" class="p4">字体粗细为900</p>
<p id="p5" class="p5">字体粗细为lighter</p>
<p id="p6" class="p6">字体粗细为normal</p>
<p id="p7" class="p7">字体粗细为bold</p>
<p id="p8" class="p8">字体粗细为bloder</p>
</body>
</html>
字体风格
字体风格font-style
font-style:normal|italic|oblique;
取值有3种：normal、italic、oblique
有些字体有斜体italic属性，有些没有；oblique是让没有italic属性的字体也能够有斜体效果。
<!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" class="p1">字体样式为normal</p>
<p id="p2" class="p2">字体样式为italic</p>
<p id="p3" class="p3">字体样式为oblique</p>
</body>
</html>
字体颜色
字体颜色color
color:颜色值;
<!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" class="p1">字体颜色为gray</p>
<p id="p2" class="p2">字体颜色为orange</p>
<p id="p3" class="p3">字体颜色为red</p>
</body>
</html>
CSS注释
/*注释的内容*/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>字体斜体</title>
<style type="text/css">
/*这是CSS注释*/
#p1 {color: gray;}
#p2 {color: orange;}
#p3 {color: red;}
</style>
</head>
<body>
<!--这是HMTL注释-->
<p id="p1" class="p1">字体颜色为gray</p>
<p id="p2" class="p2">字体颜色为orange</p>
<p id="p3" class="p3">字体颜色为red</p>
</body>
</html>
标签：CSS3,03,字体大小,weight,粗细,color,003,字体,font 来源： https://www.cnblogs.com/infuture/p/13547706.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。