梗概

  1. 用font-family属性定制页面中使用的字体
body{
     font-family:Verdana,Geneva,Arial,sans-serif;
   }
  1. 用font-size属性控制字体的大小
body{
    font-size:14px;
}

3.用color属性设置字体颜色

body{
    color:silver;
}

4.用text-decoration属性为文本增加更多风格

body{
    text-decoration:underline;
}

细解各部分

字体系列
每个font-family包含一组有共同特征的字体，共有5个字体系列：sans-serif,serif,monospace,cursive,fantasy

1.sans-serif包含Verdana,”Arial Black”,Trebuchet MS,Arial,Geneva
没有衬线，更易识别
2.serif包含Times,Times New Roman,Georgia
有衬线（新闻报纸的文字排版）
3.Monospace字体系列包括：Courier，Courier New,Andale Mono
字体包含固定宽度的字符，这些字体主要用于显示乳尖代码示例
4.Cursive字体系列：Comic Sans,Apple Chancery
看似手写的字体
5.Fantasy字体系列：LAST　ＮＩＮＪＡ，Ｉｍｐａｃｔ
　有某种风格的装饰性字体

使用CSS指定字体系列

body{
    font-family:Verdana,Geneva,Arial,"Courier New",sans-serif;
}

每个人都有不同的字体，如何处理？
*这些字体在Windows和Mac上可能都有
Verdana，Arial Black，Trebuchet MS,Arial,Times New Roman,Georgia，Courier New
，Andale Mono，Comic Sans，Ｉｍｐａｃｔ

*这些字体最有可能出现在Mac上
Geneva,Times,Courier，Helvetica
如何为页面增加Web字体

  1. 找到一个字体：访问一些提供字体的网站　　　　　　　　　　　　　　　ＦｏｎｔＳｑｕｉｒｒｅｌ（ｈｔｔｐ：／／ｗｗｗ．ｆｏｎｔｓｑｕｉｒｒｅｌ．ｃｏｍ／）就是一个很好的网站，这里提供了很多开源免费的字体，你可以把这些字体传到你的服务器。Ｇｏｏｇｌｅ　Ｗｅｂ字体服务（ｈｔｔｐ：／／ｗｗｗ．ｇｏｏｇｌｅ．ｃｏｍ／ｗｅｂｆｏｎｔｓ）也很不错，可以让Ｇｏｏｇｌｅ为你完成管理字体和ＣＳＳ的所有具体工作，在这种情况下你只需要链接Ｇｏｏｇｌｅ服务上你想要的字体，然后在你的ＣＳＳ中使用相应的字体名就可以了。灰常简单哦！
  2. 确保有所需字体的所有格式：
    常用格式
    TrueType字体：.ttp
    Web开放字体格式：.woff
  3. 把你的字体放在web上
    你可能想把你自己的字体放在网上，这样用户的浏览器就能够访问这些字体。或者也可以应用网上的很多在线字体服务，这些服务会为你托管这些文件，不论哪一种情况，你都需要这些字体的ＵＲＬ。
  4. 在ＣＳＳ中增加＠ｆｏｎｔ－ｆａｃｅ属性
    　现在你已经得到了ＵＲＬ，所以现在就要为．ｃｓｓ文件增加＠ｆｏｎｔ－ｆａｃｅ规则
    　
＠ｆｏｎｔ－ｆａｃｅ｛
    ｆｏｎｔ－ｆａｍｉｌｙ：＂Ｅｍｂｌｅｍａ　Ｏｎｅ＂；
    ｓｒｃ：url("http://wickedlysmart.com/hfhtmlcss/chapter8/journal　　　　　　　　　　　　/EmblemaOne-Regular.woff"), 
      　   url("http://wickedlysmart.com/hfhtmlcss/chapter8/journal　　　　　　　　　　　　/EmblemaOne-Regular.ttf");
｝

＠ｆｏｎｔ－ｆａｃｅ规则会建立一个字体，将指定一个ｆｏｎｔ－ｆａｍｉｌｙ名（可以使用你喜欢的任意名字），以便以后使用。

５.在ＣＳＳ中使用ｆｏｎｔ－ｆａｍｉｌｙ名

ｈ１｛
    ｆｏｎｔ－ｆａｍｉｌｙ：＂Ｅｍｂｌｅｍａ　Ｏｎｅ＂，ｓａｎｓ－ｓｅｒｉｆ；
｝

６．加载页面

％获取ｗｅｂ字体会花费一段时间，你的页面性能可能会受到影响
％用ｆｏｎｔ－ｆａｃｅ创建多种字体时，不仅要保证能够获取这些字体的ＵＲＬ，而且每个字体要创建单独的ｆｏｎｔ－ｆａｃｅ规则

**

**
调整字体大小（默认字体大小为１６ｐｘ）

  1. 用像素指定字体大小
ｂｏｄｙ｛
    ｆｏｎｔ－ｓｉｚｅ：１４ｐｘ；
｝

　　２．百分数
　　

ｈ１｛
    ｆｏｎｔ－ｓｉｚｅ：１５０％；
｝

　　　３．ｅｍ（四舍五入）
　　　

ｈ２｛
    ｆｏｎｔ－ｓｉｚｅ：１.２ｅｍ；
｝

　　　４．关键字
ｘｘ－ｓｍａｌｌ
ｘ－ｓｍａｌｌ
ｓｍａｌｌ＝１２ｐｘ
ｍｅｄｉｕｍ
ｌａｒｇｅ
ｘ－ｌａｒｇｅ
ｘｘ－ｌａｒｇｅ　　
差距：２０％　
如何指定字体大小呢

  1. 用关键字（建议ｓｍａｌｌ和ｍｅｄｉｕｍ）设置为ｂｏｄｙ字体大小，相当于默认字体
  2. 用ｅｍ或者百分数指定其他元素
    改变字体粗细
ｆｏｎｔ－ｗｅｉｇｈｔ：ｂｏｌｄ；粗
ｆｏｎｔ－ｗｅｉｇｈｔ：ｎｏｒｍａｌ；

为字体增加风格
斜体

ｆｏｎｔ－ｓｔｙｌｅ：ｉｔａｌｉｃ；　　ｏｒ
ｆｏｎｔ－ｓｔｙｌｅ：ｏｂｌｉｑｕｅ；

Ｗｅｂ颜色
方法一：
橙色

ｂｏｄｙ｛
    ｂａｃｋｇｒｏｕｎｄ－ｃｏｌｏｒ：ｒｇｂ（８０％，４０％，０％）；
｝

或者用０到２５６之间的数字

ｂｏｄｙ｛
    ｂａｃｋｇｒｏｕｎｄ－ｃｏｌｏｒ：ｒｇｂ（２０４,１０２,０）；
｝

十六进制码

ｂｏｄｙ｛
    ｂａｃｋｇｒｏｕｎｄ－ｃｏｌｏｒ：＃ｃｃ６６００；
｝

０　１　２　３　４　５　６　７　８　９　１０　１１　１２　１３　１　４　１５
０　１　２　３　４　５　６　７　８　９　　Ａ　　Ｂ　　Ｃ　　Ｄ　　Ｅ　　Ｆ

ｔｅｘｔ－ｄｅｃｏｒａｔｉｏｎ

ｔｅｘｔ－ｄｅｃｏｒａｔｉｏｎ：ｕｎｄｅｒｌｉｎｅ；
ｔｅｘｔ－ｄｅｃｏｒａｔｉｏｎ：ｌｉｎｅ－ｔｈｒｏｕｇｈ；
ｔｅｘｔ－ｄｅｃｏｒａｔｉｏｎ：ｕｎｄｅｒ－ｌｉｎｅ，ｏｖｅｒ－ｌｉｎｅ；
*想要同事使用两个时，必须放在一起*
ｔｅｘｔ－ｄｅｃｏｒａｔｉｏｎ：ｎｏｎｅ；