6月21号=》181页-190页

7.4　　CSS3新增的服务器字体

　　　　　　在CSS3以前，开发网页时使用某种字体后，如果客户端希望正常显示该网页，则必须在客户端已安装

　　　　　　　　这种字体；否则该网页上的字体设置在客户端就不会起作用。

　　　　　　CSS3的出现改变了这种 现状，CSS3允许使用服务器字体，如果客户端没有安装这种字体，客户端将会自动下载这种字体。

 

7.4.1　　使用服务器字体

　　　　　　使用服务器字体非常简单，只要使用@font-face定义服务器字体即可。

　　　　　　@font-face的语法格式如下：

　　　　　　　　@font-face{

　　　　　　　　　　　　font-family:name;　　

　　　　　　　　　　　　src:url(url) format("TrueType");

　　　　　　　　}

　　　　　　　　//使用服务器的字体

　　　　　　　　<div style="font-family:name"></div>

　　　　　　上面语法格式中的font-family属性值用于指定该服务器字体的名称，这个名称可以随意定义；src属性中通过url指定该

　　　　　　字体的字体文件的绝对或相对路径；format则用于指定该字体的字体格式，到目前为止，服务器字体还只支持TrueType格式

　　　　　　(对应与*.ttf字体文件)和OpenType格式(对应于*.otf字体文件)。

 

7.4.2　　定义粗体、斜体字

　　　　　　在页面上指定字体时，除了可以指定特定字体之外，还可以指定使用粗体字、斜体字，但在使用服务器字体时，需要为粗体、斜体、

　　　　　　粗斜体使用不同的字体文件(需要相应地下载不同的字体文件)。

　　　　　　代码示范：

　　　　　　　　@font-face{

　　　　　　　　　　font-family：name

　　　　　　　　　　src：url(url) format("OpenType")

　　　　　　　　　　font-weight：blod;

　　　　　　　　}

　　　　　　　　//使用粗体服务器的字体

　　　　　　　　<div style="font-family:name font-weight:blod"></div>

　　　　　　从上面代码看来，定义粗体字、斜体的服务器字体主要注意三点即可。

　　　　　　　　使用粗体字、斜体字专门的字体。

　　　　　　　　在@font-face中增加font-weight、font-style等定义。

　　　　　　　　在元素的css样式中指定font-weight、font-style。

 

7.4.3　　优先使用客户端字体

　　　　　　虽然CSS3提供了服务器字体功能，但也不能动不动上来就用"服务器字体"，因为用服务器字体需要从远程服务器下载字体文件，

　　　　　　因此效率并不好。实际上，我们还是应该尽量考虑使用浏览者的客户端字体。只有当客户端不存在这种字体是，才考虑使用服务器

　　　　　　字体作为代替方案，CSS3也为这种方案提供了支持。

　　　　　　代码示范：

　　　　　　　　@font-face{

　　　　　　　　　　　　font-family:name;

　　　　　　　　　　　　src:local("客户端字体名称"),url("服务器字体URL") format("TrueType");

　　　　　　　　}

　　　　　　　　//优先使用客户端字体

　　　　　　　　<div style="font-family:name"></div>

 

8.1　　背景相关属性

　　　　　　背景相关属性用于控制背景色、背景图片等属性。在控制背景图片的同时，还可控制背景图片的排列方式。

　　　　　　有如下几个常用的背景相关属性：

　　　　　　　　background：设置对象的背景样式。该属性石一个复合属性，可用于同时设置背景颜色、背景图片、背景重复模式等属性。

　　　　　　　　　　　　　　　　为了更好的控制背景，一般不建议通过该属性来控制背景。

　　　　　　　　background-attachment：设置背景图片是随对象内容滚动还是固定的。该属性有如下两个值。

　　　　　　　　　　　　scroll：指定背景图片会随组件里内容的滚动而滚动。这是默认值。

　　　　　　　　　　　　fixed：背景图片固定，不会随组件里内容的滚动而滚动。

　　　　　　　　brckground-color：用于设置背景色。如果同时设置了背景色和背景图片，则背景图片将覆盖背景色。

　　　　　　　　brckground-image：用于设置背景图片。该属性需要使用url()函数指定图片地址，图片地址既可以是相对地址，也可以是绝对地址。

　　　　　　　　background-position：用于设置对象的背景图片位置，该属性值应该是两个值，他们既可以是实际的长度值，也可是百分比。如果

　　　　　　　　　　　　　　　　　　　　只指定了一个值，该值将对应横坐标，纵坐标默认为50%；如果指定两个值，那么第二个值将对应纵坐标。

　　　　　　　　background-repeat：适用于CSS1，用于 对象的背景图片是否平铺。该属性有repeat、no-repeat、repeat-x、repeat-y 4个值，

　　　　　　　　　　　　　　　　　　　　分别对应在纵向和横向同时平铺、不平铺、仅在横向平铺、仅在纵向平铺。