通过使用CSS，控制文本的字体，风格和颜色
1.基本操作：
1 body{ 2 font-family: Verdana, Geneva, Tahoma, sans-serif 3 } 4 5 body{ 6 font-size: 14px 7 } 8 9 body{10 color: silver11 }12 13 body{14 font-weight: bold15 }16 17 body{18 text-decoration: underline19 }注释：
- font-family：定制页面中使用的字体
- font-size：控制字体大小
- color：为文本设置颜色
- font-weight：影响字体的粗细
- text-decoration：为文本增加更多风格
2.字体系列：
系列分类：
- sans-serif
- serif
- monospace
- cursive
- fanstasy
- 衬线：是字母末端的装饰性的小线
示例：
- Monospace：字体包含固定宽度的字符，例如：一个“i”水平的宽度和一个“m”相同，主要用于显示软件代码示例
总结特点：
- serif字体看起来很高雅，传统。
- sans-serif字体外观清晰，可读性好
- monospace 像打字机打出来的
- Cursive和fantasy字体给人有趣或者很有分格的感觉
3.使用CSS指定字体系列：
浏览器的幕后工作：
1 body{2 font-family: Verdana, Geneva, Tahoma, sans-serif3 }
注释：
- 我们为body指定了4个候选字体
- 浏览器会从左往右进行选择
- 如果浏览器检查到用户没有定制的第一个字体，会接着检查第二个
- 直到查找到用户有的字体
- 如果前面3种特定的字体都没找到，浏览器就会使用默认的sans-serif字体
示图：
4.Wed字体的使用
我们都会有这样一个想法，
自己辛苦设计的页面，有很酷的字体，
不希望到了用户手里，却全都变成了默认。。。
因此：有了@font-face规则
使用步骤：
- 找到一个字体，可以是自己所有的，也可以使用提供字体网站授权给你使用的
- 确保有所需字体的格式，一般建议使用web开放字体格式（.woff）
- 把字体文件放在web上，或者利用在线字体服务为你托管这些文件。但无论哪种，你都需要字体文件的URL
- 在CSS中增加@font-face属性
- 在CSS中使用@font-face属性
示例代码：
1 @font-face{ 2 /*我们为我们的字体设立一个名字*/ 3 font-family: "JJStyle One"; 4 /*浏览器会加载src指定的字体文件，直到找到他能支持的一个文件*/ 5 src: ur1("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.woff") 6 ur1("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.ttf") 7 } 8 9 10 h1{11 /*使用我们指定的字体名*/12 font-family: "JJStyle One",sans-serif;13 } 注意：
- 可以定制多个字体，但需要保证服务器上有相应的字体文件，
- 而且要分别创建一个单独的@font-face规则，且名字唯一
5.调整字体大小
大多数默认的字体都不太美观，
为此，作为设计者，
都需要知道如何指定字体大小。
指定font-size的一些方法：
- PX
- %
- em
- 关键字
示例代码：
1 body{ 2 /*字体的高度为14像素*/ 3 font-size: 14px 4 } 5 6 h1{ 7 /*字体大小为相对于另一个字体大小的150%，这里是相对于body字体的大小*/ 8 font-size:150% 9 }10 11 h2{12 /*相对于另一个字体1.2倍*/13 font-size: 1.2em;14 }15 16 h3{17 font-size: small18 /*关键字有：xx-small,x-small,small,medium,large,x-large,xx-large*/19 }指定字体大小的建议：
- 选择一个关键字（推荐samll或mediun），指定它为body规则的字体大小。相当于页面默认大小
- 使用em或百分数，相对于body字体大小指定其它元素的字体大小（使用em还是百分数由你决定，因为效果都一样）
1 body{ 2 font-family: Verdana, Geneva, Tahoma, sans-serif; 3 /*字体的高度为14像素*/ 4 font-size: small 5 } 6 7 h1{ 8 font-family: sans-serif; 9 /*字体大小为相对于另一个字体大小的150%，这里是相对于body字体的大小*/10 font-size:150%11 }12 13 h2{14 /*相对于另一个字体1.2倍*/15 font-size: 1.2em;16 }示图：
6.改变字体粗细：
- font-weight：bold
- font-weight：normal
7.为字体增加风格：
斜体：
- not italic
- italic（文本向右倾斜，另外衬线还有弯曲）
倾斜：
- not oblique
- oblique（普通文本向右倾斜）
注意：
- 一般来说，不论你指定什么风格，结果都不确定，有时是斜体，有时是倾斜。
- 所以，除非真的对你很重要，不然完全可以就用斜体，不用担心差别
8.颜色样式：
指定颜色的方法：
1.按名字指定
1 body{2 background-color: silver;
3 }2.用红绿蓝值指定颜色
1 body{2 /*rgb：红绿蓝 颜色的缩写*/3 background-color: rgb(80%, 40%, 0%);4 }5 h1{6 background-color: rgb(204,102,0);7 }3.用16进制码指定
1 h2{2 background-color: #cc66003 }注释：
- 十六进制码以#开头
- 前两位数字表示红色的分量，中间两位是绿色，后面两位是蓝色
文本装饰：
1 em{ 2 /*使<em>元素有一个从文本中间穿过的横线*/ 3 text-decoration: line-through; 4 } 5 6 7 em{ 8 /*使<em>元素有一个上画线和下划线*/ 9 text-decoration: underline overline;10 }11 12 em{13 /*使<em>元素没有任何装饰*/14 text-decoration: none;15 }16 17 h1,h2{18 color: #cc6600;19 /*在下滑框上加一条细的虚线*/20 border-bottom:thin dotted #aabbcc;21 }
The end--
原标题：增加字体和颜色样式
关键词：
我知道了 