从零开始的毕设--CSS（2）

Web字体

由于font-family里面的字体可能不是每个计算机都有的，为了防止某些计算机上没有这个字体，可以有两种方法：

	body{
	font-family:  sans-serif,字体1,字体2,字体3;
	/**计算机首先判断有没有 sans-serif，如果没有则判断有没有字体1，然后字体2，以此类推*/
}

上述方法治标不治本，所以有如下方法，通过向服务器请求字体，在页面上显示，也就是说计算机不用在本机上下载：

1. 找到字体的所有格式：
   
2. 把字体放在Web上：
   
3. 在CSS中增加@font-face属性

@font-face{
	font-family:"Emblema One";/**为字体创建的名字*/
	src:url("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.woff"),
	url("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.ttf")；
}
/**@font-face规则告诉浏览器，要加载由src URL指定的字体文件*/
/**而浏览器会挨个试src，直到找到它能支持的字体文件*/

4. 在CSS中使用font-family名字

h1{
	font-family:"Emblema One", sans-serif;
	/**指定名字加引号，并且以防万一加了备用字体。**/
}

• @font-face看起来不像是CSS规则？
  可以认为@font-face是一个内置的CSS规则，它不是以前的那种选择器规则。
• 还有其他需要了解的内置CSS规则吗？
  有，比如两个常用的规则@import和@media。@import允许导入其他CSS文件(而不是HTML通过<link>链接)，@media允许创建特定于某些“媒体”类型的CSS规则，如印刷页、桌面屏幕或手机。后面还会讲到@media.
• Web字体有缺点么？
  有，比如有些移动设备和小型设备可能不支持Web字体，所以设计里一定要考虑备用字体。再比如，如果使用了多个定制字体，那么页面加载速度会变慢。

指定字体大小
一般会根据像素来确定。与之不同的是，还可以用一个百分数来指定字体相对于其父元素的字体的大小：

body{
	font-size:14px;
}
h1{
	font-size:150%;
	/**相对于body的字体大1.5倍*/
	/**也等于1.5em*/
}

除了px % em ，还可以使用关键字：
xx-small x-small small medium large x-large xx-large
推荐在body内使用关键字，其他地方用%或者em控制字体大小。

增加颜色

使用rgb

body{
	background-color: rgb(80%,40%,0%);
}
/**上下两个是等价的*/
h1{
	background-color:rgb(204,102,0);
}

十六进制码表示颜色

body{
	background-color:#cc6600;
}