CSS3的字体和文本相关属性

旧城等待， 2022-05-03 14:26 370阅读 0赞

CSS3其中一个重要变化就是增加了服务器字体功能，这样避免了我们浏览页面时因为字体缺失导致网页效果变差的问题。通过CSS3的服务器字体功能，可以控制浏览器使用服务器包含的字体，这样可以保证即使我们的电脑上没有安装任何字体，也可以呈现出统一的页面。

#  字体相关属性 #

CSS为控制文本的字体提供了很多的属性，这些字体相属性关的属性主要用于控制文本的字体、颜色、修饰等外观。字体相关属性如下所示：

<table> 
 <tbody> 
  <tr> 
   <td style="width:134px;">font</td> 
   <td>控制文字的样式、字体粗体、大小等属性。为了更好的进行控制，通常不使用该属性。</td> 
  </tr> 
  <tr> 
   <td style="width:134px;">color</td> 
   <td>控制文字的颜色，属性值可以是颜色名、十六进制的颜色值、rgb函数、CSS3提供的HSL颜色值（色相、饱和度、明度）</td> 
  </tr> 
  <tr> 
   <td style="width:134px;">font-family</td> 
   <td>设置文字的字体，可以设置多个显示字体（以，号隔开）。</td> 
  </tr> 
  <tr> 
   <td style="width:134px;">font-size</td> 
   <td>设置文字的字体，可以是相对字体，也可以是绝对字体。支持xx-small、x-smallengthl、small、medium、large、length等属性值</td> 
  </tr> 
  <tr> 
   <td style="width:134px;">font-size-adjust</td> 
   <td>用于控制对不同字体的尺寸进行微调，可以指定none（不进行任何调整）。</td> 
  </tr> 
  <tr> 
   <td style="width:134px;">font-stretch</td> 
   <td>改变文字横向的拉伸，默认值为normal（表示不拉申），还有两个属性值，narrower（横向压缩）和wider（横向拉伸）</td> 
  </tr> 
  <tr> 
   <td style="width:134px;">font-style</td> 
   <td>设置文字的风格，是否使用斜体等。属性值：normal、itlic、oblique，设置文字正常、斜体、倾斜字体。</td> 
  </tr> 
  <tr> 
   <td style="width:134px;">font-weight</td> 
   <td>设置字体是否加粗，可以用100、200、300、900来控制字体的加粗程度。</td> 
  </tr> 
  <tr> 
   <td style="width:134px;">text-decoration</td> 
   <td>用于控制文字是否有修饰线，如下画线等，属性的值有none、blink、underline、line-through、overline，意思分别为无修饰、闪烁、下画线、中画线和上画线等。</td> 
  </tr> 
  <tr> 
   <td style="width:134px;">font-variant</td> 
   <td>设置文字的大写字母格式。该属性支持normal、small-caps两个属性，分别代表正常字体、小型的大写字母字体。</td> 
  </tr> 
  <tr> 
   <td style="width:134px;">text-shadow</td> 
   <td>设置文字是否有阴影效果。</td> 
  </tr> 
  <tr> 
   <td style="width:134px;">text-transform</td> 
   <td>设置文字的大小写。该属性支持none、small-capitalize、uppercase和lowercase，分别代表不转换、手写字母大写、全部大写。全部小写。</td> 
  </tr> 
  <tr> 
   <td style="width:134px;">line-height</td> 
   <td>设置字体的行高，即字体最底端与字体内部顶端之间的距离，为负值的行高可以实现阴影效果。</td> 
  </tr> 
  <tr> 
   <td style="width:134px;">letter-spacing</td> 
   <td>设置字符之间的间隔，最后一个文字不会受到影响，该属性支持normal和数据+长度单位（如11pt、14px等）两种属性。</td> 
  </tr> 
  <tr> 
   <td style="width:134px;">word-spacing</td> 
   <td>设置单词之间的间隔，该属性支持normal和数据+长度单位（如11pt、14px等）两种属性。</td> 
  </tr> 
 </tbody> 
</table>

下面代码写了对上面各种属性进行了示范，页面左边是设置的属性值，右边则是设置后的效果。

<!DOCTYPE html>
    <html>
    <head>
    	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    	<title> 字体相关属性设置 </title>
    </head>
    <body>
    color:#888888：
    <span style="color:#888888">测试文字</span><br />
    color:red：
    <span style="color:red">测试文字</span><br />
    font-family:隶书：
    <span style="font-family: '隶书'">测试文字</span><br />
    font-size:20pt：
    <span style="font-size:20pt">测试文字</span><br />
    font-size:xx-large：
    <span style="font-size:xx-large">测试文字</span><br />
    font-stretch:narrower：
    <span style="font-stretch:narrower">测试文字</span><br />
    font-stretch:wider：
    <span style="font-stretch:wider">测试文字</span><br />
    font-style:italic：
    <span style="font-style:italic">测试文字</span><br />
    font-weight:bold：
    <span style="font-weight:bold">测试文字</span><br />
    font-weight:900：
    <span style="font-weight:900">测试文字</span><br />
    text-decoration:blink：
    <span style="text-decoration: blink;">测试文字</span><br />
    text-decoration:underline：
    <span style="text-decoration:underline">测试文字</span><br />
    text-decoration:line-through：
    <span style="text-decoration:line-through">测试文字</span><br />
    font-variant:small-caps ：
    <span style="font-variant:small-caps">hello</span><br />
    text-transform:uppercase：
    <span style="text-transform:uppercase">hello</span><br />
    text-transform:capitalize：
    <span style="text-transform:capitalize">hello</span><br />
    line-height:30pt：
    <span style="line-height:30pt">测试文字</span><br />
    letter-spacing:5pt：
    <span style="letter-spacing:5pt">hello world</span><br />
    letter-spacing:15pt：
    <span style="letter-spacing:15pt">hello world</span><br />
    word-spacing:20pt：
    <span style="word-spacing:20pt">hello world</span><br />
    word-spacing:60pt：
    <span style="word-spacing:60pt">hello world</span><br />
    </body>
    </html>

## 1.使用text-shadow添加阴影 ##

字体相关属性提供了一个text-shadow属性，该属性值形如color xoffset yoffset length，或xoffset yoffset radius color。

*  color：指定阴影的颜色，如果省略指定阴影颜色，在Firefox、Opera中直接使用字体颜色作为阴影颜色，在IE和谷歌不会显示阴影。
 *  xoffset ：指定阴影在横向上的偏移。
 *  yoffset ：指定阴影在纵向上的偏移。
 *  radius：指定阴影的模糊半径。模糊半径越大，阴影看上去越模糊。

下面页面代码示范了设置阴影的几个参数的意思：

<!DOCTYPE html>
    <html>
    <head>
    	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    	<title> 阴影 </title>
    </head>
    <body>
    text-shadow:red 5px 5px 2px：
    <p style="text-shadow:red 5px 5px 2px">测试文字</p>
    text-shadow:5px 5px 2px（省略阴影颜色）：
    <p style="text-shadow:5px 5px 2px;color:blue;">测试文字</p>
    text-shadow:-5px -5px 2px gray（向左上角投影）：
    <p style="text-shadow:-5px -5px 2px gray">测试文字</p>
    text-shadow:-5px 5px 2px gray（向左下角投影）：
    <p style="text-shadow:-5px 5px 2px gray">测试文字</p>
    text-shadow:5px -5px 2px gray（向右上角投影）：
    <p style="text-shadow:5px -5px 2px gray">测试文字</p>
    text-shadow:5px 5px 2px gray（向右下角投影）：
    <p style="text-shadow:5px 5px 2px gray">测试文字</p>
    text-shadow:15px 15px 2px gray（向右下角投影、更大偏移距）：
    <p style="text-shadow:15px 15px 2px gray">测试文字</p>
    text-shadow:5px 5px 10px gray（模糊半径增加，模糊程度加深）：
    <p style="text-shadow:5px 5px 10px gray">测试文字</p>
    </body>
    </html>

## 2.添加多个阴影 ##

如果希望为文字添加多个阴影，则可以为text-shadow属性设置几组阴影，多组阴影之间用逗号隔开，例如下面代码所示：

<!DOCTYPE html>
    <html>
    <head>
    	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    	<title> 多个阴影 </title>
    	<style type="text/css">
    		span{
    			display: block;
    			padding: 8px;
    			font-size:xx-large;
    		}
    	</style>
    </head>
    <body>
    text-shadow:5px 5px 2px #222,<br/>
    	30px 30px 2px #555 ,<br/>
    	50px 50px 2px #888（多个阴影）：
    <span style="text-shadow:5px 5px 2px #222,30px 30px 2px #555
    	,50px 50px 2px #888">测试文字</span>
    </body>
    </html>

## 3.使用font-size-adjust属性微调字体大小 ##

对于西方文字来说，相同字号、不同字体的字母也是不同的，例如以下代码：

<!DOCTYPE html>
    <html>
    <head>
    	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    	<title> text-size-adjust </title>
    	<style type="text/css">
    		#div1 {
    			font-size: 16pt;
    			font-family: "Courier New";
    			font-size-adjust: 0.41;
    		}
    		#div2 {
    			font-size: 16pt;
    			font-family: "Roma";
    			font-size-adjust: 0.66;
    		}
    		#div3 {
    			font-size: 16pt;
    			font-family: "Impact";
    			font-size-adjust: 0.93;
    		}
    	</style>
    </head>
    <body>
    <div id="div1">Our domain is www.crazyit.org</div>
    <div id="div2">Our domain is www.crazyit.org</div>
    <div id="div3">Our domain is www.crazyit.org</div>
    </body>
    </html>

# CSS3支持的颜色表示方法 #

CSS2已经提供了多种颜色表示的方法，如字符串形式的颜色名、十六进制的颜色值等。但CSS2不允许为颜色设置透明度，因此显得不够完善。CSS则提供了更多的颜色表示方法，总结起来有如下几种：

*  用颜色名表示，例如white（白色）、red（红色）、blue（蓝色）等。
 *  用十六进制表示，这是典型的三原色混合原理，例如：\#FF0000，其中前两位FF表示红光的值——也就是把红光分成0~255个色阶，其中00表示满意红光，\#”开头的6位十六进制数值表示一种颜色。6位数字分为3组，每组两位，依次表示红、绿、蓝三种颜色的强度。
 *  用rgb(r，g，b)函数表示，这也是三原色混合原理。例如rgb(255,255,0)，红光的值为255（最大值）、绿光也是255（最大值），蓝光的值为0，混合出来就是黄色。在RGB 颜色模式，颜色由表明红色，绿色，和蓝色各成分强度的三个数值表示。从极小值0到最大值255，当所有颜色,都在最低值被显示的颜色将是黑色，当所有颜色都在他们的最大值被显示的颜色将是白色。但是，一个缠扰不清的方面在RGB 颜色模式是，所有这些颜色可能代表以各种各样的方法。
 *  用hsl（Hue，Stauration，Lightness）函数表示，用色调、饱和度、亮度控制的颜色，例如hsl(120,100%,100%)其中色调为120，也就是绿色（色调0代表红色、色调120代表绿色、色调240代表蓝色），饱和度、亮度都是100%，所以就是绿色。
 *  rgba(r，g，b，a)函数表示，跟rgb函数相似，比它多了个a，就是透明度的意思。a参数可以在0~1之间的任意数，其中0代表完全透明。
 *  hsla函数跟hsl相比多了个alpha参数，用于指定颜色的透明度，alpha参数可以在0~1之间的任意数，其中0代表完全透明。

下面代码示范了各种颜色表示的方法：

<!DOCTYPE html>
    <html>
    <head>
    	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    	<title> 颜色表示方式 </title>
    	<style type="text/css">
    		div>div{
    			width: 400px;
    			height: 40px;
    		}
    	</style>
    </head>
    <body>
    <script type="text/javascript">
    	for (var i = 0; i < 110 ; i++)
    	{
    		document.write("测试文字");
    	}
    </script>
    <div style="position:absolute;top:0px">
    	<div style="background-color:gray;">background-color:gray</div>
    	<div style="background-color:#aaa;">background-color:#aaa;</div>
    	<div style="background-color:#ffff00;">background-color:#ffff00;</div>
    	<div style="background-color:rgb(255, 0 , 255);">
    		background-color:rgb(255, 0 , 255);</div>
    	<div style="background-color:hsl(120, 80%, 50%);">
    		background-color:hsl(120, 80%, 50%);</div>
    	<div style="background-color:rgba(255, 0 , 255 , 0.5);"></div>
    	<div style="background-color:hsla(120, 80%, 50% , 0.5);"></div>
    </div>
    </body>
    </html>

# 文本相关属性 #

文本相关属性用于控制整个段、整个<div>元素内文本的显示效果，包括文本的缩进、段落内文字的对齐等显示方式。

1.text-indent：用于设置段落文本的缩进，默认值为0.被另外一个元素（如br）断开的元素不能应用本属性。

2.text-overflow：用于控制溢出文本的出来方法。该属性支持如下两个属性值。

*  clip：如果该元素指定了overflow：hidden属性值，该元素中文本溢出时，clip指定只要简单裁切溢出的文本（不显示超长的部分）。
 *  ellipsis：如果该元素指定了overflow：hidden属性值，该元素中文本溢出指定，ellipsis指定裁切溢出的文本，并显示溢出标记（...）显示。

3.vertical-align：用于设置目标元素内容的垂直对齐方式，通常有顶端对齐，底对齐等方式。

*  auto：对元素的文本内容执行自动对齐。
 *  baseline：默认值，将支持valign属性的元素的文本内容与基线对齐。
 *  sub：将元素的内容与文本下标对齐。
 *  super：将元素的内容与文本上标对齐。
 *  top：默认值，将支持valigin属性的元素文本内容与元素顶端对齐。
 *  middle：默认值，将支持valigin属性的元素文本内容对齐到元素的中间。
 *  bottom：默认值，将支持valigin属性的元素文本内容与元素底端对齐。
 *  length：指定文本内容相对于基线的偏移距离。

4.text-align：用于设置目标元素中文本的水平对齐方式。该属性支持left、right、center（居中对齐）、justify（两端对齐）。

5.direction：用于设置文本流入的方向，该属性的合法值有ltr（从左向右）和rtl（从右向左）。该属性不会影响拉丁文字母、数字字符，它们总是以ltr值呈现。但此属性会作用于拉丁文的标点符号。

6.white-space：用于设置目标元素对文本内容中空白的处理方式。

7.word-break：用于设置目标元素中文本内容的换行方式。

8.word-wrap：用于设置目标元素中文本内容的换行方式。

下面的代码示范了上面我们常用到的文本相关属性：

<!DOCTYPE html>
    <html>
    <head>
    	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    	<title>文本相关属性设置</title>
    	<style type="text/css">
    	/* 为div元素增加边框 */
    	div{
    		border:1px solid #000000;
    		height: 30px;
    		width: 200px;
    	}
    	</style>
    </head>
    <body>
    
    text-indent:20pt <div style="text-indent:20pt">测试文字</div>
    
    text-indent:40pt <div style="text-indent:40pt">测试文字</div>
    
    text-align:center <div style="text-align:center">测试文字</div>
    
    text-align:right <div style="text-align:right">测试文字</div>
    
    direction:rtl <div style="direction:rtl">测试文字</div>
    
    direction:ltr <div style="direction:ltr">测试文字</div>
    
    text-overflow:clip <div style="overflow:hidden;white-space:nowrap;
    	text-overflow:clip;">测试文字测试文字测试文字测试文字测试文字测试文字</div>
    
    text-overflow:ellipsis <div style="overflow:hidden;white-space:nowrap;
    	text-overflow:ellipsis;">测试文字测试文字测试文字测试文字测试文字测试文字</div>
    </body>
    </html>

## 1.使用white-space控制空白的处理行为 ##

white-space用于控制HTML元素对元素文本中空白的处理方式。该属性支持以下几个属性值：

*  normal：默认值，浏览器忽略文本的空白。
 *  pre：浏览器将保留文本中的所有空白，其行为类似于<pre>标签。
 *  nowrap：文本不会换行，文本会在同一行上继续，直到遇到<br>标签为止。
 *  pre-wrap：保留空白符的序列，但可以正常的换行。
 *  pre-line：合并空白符的序列，但保留换行符。
 *  inherit：指定从父元素继承white-space属性的值。

下面代码将示范了white-space属性对空白的处理行为：

<!DOCTYPE html>
    <html>
    <head>
    	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    	<title> white-space </title>
    	<style type="text/css">
    	/* 为div元素增加边框 */
    	div{
    		border:1px solid #000000;
    		height: 80px;
    		width: 240px;
    	}
    	</style>
    </head>
    <body>
    
    white-space:normal <div style="white-space:normal">
    The root interface   in    
    the     collection     hierarchy. </div>
    
    white-space:pre <div style="white-space:pre">
    The root interface   in    
    the     collection     hierarchy. </div>
    
    white-space:nowrap <div style="white-space:nowrap">
    The root interface   in    
    the     collection     hierarchy. </div>
    
    white-space:pre-wrap <div style="white-space:pre-wrap">
    The root interface   in    
    the     collection     hierarchy. </div>
    
    white-space:pre-line <div style="white-space:pre-line">
    The root interface   in    
    the     collection     hierarchy. </div>
    </body>
    </html>

## 2.文本自动换行：word-break ##

当HTML元素不足以显示它里面的文本时，浏览器将会自动换行显示它里面的所有文本。浏览器换行规则：对于西方文字来说，浏览器只会在半角空格、连字符的地方换行；对于中文来说，浏览器可以在任何一个中文字符后换行。如果希望改变浏览器的默认换行行为，自己有需求的话，可以看看如下属性值：

*  normal：靠浏览器的默认规则进行换行。（浏览器换行规则）
 *  keep-all：只能在半角空格或连字符处换行。
 *  break-all：设置允许在单词中间换行。

如果想要让浏览器在西方文字的单词中间换行，则可将word-break属性设置为break-all。下面代码将示范了word-break属性功能：

<!DOCTYPE html>
    <html>
    <head>
    	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    	<title> word-break </title>
    	<style type="text/css">
    	/* 为div元素增加边框 */
    	div{
    		border:1px solid #000000;
    		height: 50px;
    		width: 240px;
    	}
    	</style>
    </head>
    <body>
    
    word-break:keep-all <div style="word-break:keep-all">
    The root interface in the collection hierarchy. </div>
    
    word-break:break-all <div style="word-break:break-all">
    The root interface in the collection hierarchy. </div>
    </body>
    </html>

## 3.用word-wrap控制长单词或URL地址换行。 ##

有时候文本内容包含了特别长的单词或特别长的URL地址——URL地址既不包含半角空格，也不包含连字符，因此当浏览器窗口比较窄时，将会出现滚动条。如果需要改变默认行为，就需要通过word-wrap属性设置，该属性有如下两个值：

*  normal：靠浏览器的默认规则进行换行。
 *  break-word：设置单词允许中间换行。

为了让浏览器控制文本的内容在长单词、URL地址中间换行，可以通过word-wrap属性，设置为brea-word即可，如下所示：

<!DOCTYPE html>
    <html>
    <head>
    	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    	<title> word-wrap </title>
    	<style type="text/css">
    	/* 为div元素增加边框 */
    	div{
    		border:1px solid #000000;
    		height: 70px;
    		width:140px;
    	}
    	</style>
    </head>
    <body>
    
    word-wrap:normal <div style="word-wrap:normal;">
    Our domain is http://www.crazyit.org</div>
    
    word-wrap:break-word <div style="word-wrap:break-word;">
    Our domain is http://www.crazyit.org</div>
    </body>
    </html>

注意：work-break和work-wrap属性的作用是不同的。work-break设置为break-all，可以让元素内每一行文本最后一个单词自动换行；work-wrap则会尽量让长单词、URL地址不要换行。即使设置为break-word，也会尽量让其单独占一行，只有当一行文本不足以显示这个长单词、URL地址时，才会在其中间换行。

# CSS3新增的服务器字体 #

在CSS3以前，我们只能使用最普通的字体，有些网页甚至根本不会设置字体，这是因为网页上使用某种字体后，除非我们电脑上存在这种字体，否则显示将无效。CSS3的出现改变了这种现状，CSS3允许使用服务器字体，如果客户端没有安装这种字体，客户端将会自动去下载这种字体。

## 1.使用服务器字体 ##

使用服务器字体很简单，只要使用@font-face定义服务器字体即可。大家是不是感觉很简单，@font-face语法如下：

@font-face {
    	font-family: name;
    	src: url(url) format(fontformat);
            sRules
    }

font-familt：服务器字体的名称，可以随意定义。src：通过URL指定该字体文件的路径，format指的是字体的格式。为了使用服务器字体，步骤如下（需要字体文件的可以网上下载也可以在我的资源库中下载）：

1.  下载需要使用服务器字体对应的字体文件（在网上搜一搜，会有大量的字体让我们下载）。
2.  使用@font-face定义服务器字体。
3.  通过font-family指定服务器字体。

<!DOCTYPE html>
    <html>
    <head>
    	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    	<title> 服务器字体 </title>
    	<style type="text/css">
    		/* 定义服务器字体，字体名为CrazyIt
    		服务器字体对应的字体文件为Blazed.ttf */
    		@font-face {
    			font-family: CrazyIt;
    			src: url("Blazed.ttf") format("TrueType");
    		}
    	</style>
    </head>
    <body>
    
    <div style="font-family:CrazyIt;font-size:36pt">
    Our domain is http://www.baidu.com
    </div>
    </body>
    </html>

## 2.定义粗体、斜体字 ##

我们在网页上除了定义字体外，还会定义粗体、斜体。但在使用服务器字体时，需要为粗体、斜体、粗斜体使用不同的字体文件。在@font-face中增加了font-weight，font-style等定义（字体文件需要下载）。

<!DOCTYPE html>
    <html>
    <head>
    	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    	<title> 服务器字体 </title>
    	<style type="text/css">
    		/* 定义普通的服务器字体 */
    		@font-face {
    			font-family: CrazyIt;
    			src: url("Delicious-Roman.otf") format("OpenType");
    		}
    		/* 定义粗体的服务器字体 */
    		@font-face {
    			font-family: CrazyIt;
    			src: url("Delicious-Bold.otf") format("OpenType");
    			font-weight: bold;
    		}
    		/* 定义斜体的服务器字体 */
    		@font-face {
    			font-family: CrazyIt;
    			src: url("Delicious-Italic.otf") format("OpenType");
    			font-style: italic;
    		}
    		/* 定义粗斜体的服务器字体 */
    		@font-face {
    			font-family: CrazyIt;
    			src: url("Delicious-BoldItalic.otf") format("OpenType");
    			font-style: italic;
    			font-weight: bold;
    		}
    	</style>
    </head>
    <body>
    <div style="font-family:CrazyIt;font-size:30pt">
    Our domain is http://www.baidu.com</div>
    <div style="font-family:CrazyIt;font-size:30pt;font-weight:bold">
    Our domain is http://www.baidu.com</div>
    <div style="font-family:CrazyIt;font-size:30pt;font-style:italic;">
    Our domain is http://www.baidu.com</div>
    <div style="font-family:CrazyIt;font-size:30pt;font-weight:bold
    ;font-style:italic;">Our domain is http://www.baidu.com</div>
    </body>
    </html>

## 3.优先使用客户端字体 ##

虽然CSS3提供了服务器字体功能，但也不能动不动上来就用服务器字体，因为它需要从远处服务器下载字体文件，效率感觉并不好。所以尽量使用客户端字体，当客户端不存在这种字体时，才考虑用服务器字体进行代替(url可以是本地也可以是网页服务器上的文件)。

<!DOCTYPE html>
    <html>
    <head>
    	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    	<title> 优先使用客户端字体 </title>
    	<style type="text/css">
    		/* 定义服务器字体：CrazyIt
    		该字体优先使用客户端字体：Goudy Stout
    		当客户端字体不存在时，使用Blazed.ttf作为替代字体。
    		*/
    		@font-face {
    			font-family: CrazyIt;
    			src: local("Goudy Stout"), url("Blazed.ttf") format("TrueType");
    		}
    	</style>
    </head>
    <body>
    <div style="font-family:CrazyIt;font-size:24pt">
    Our domain is http://www.baidu.com
    </div>
    </body>
    </html>

指定src属性时，优先使用local("Goudy Stout")客户端字体，当不存在时， url("Blazed.ttf")才会去替代它。

**CSS3服务字体文件可以在我的资源库中进行 下载：**[链接地址][Link 1]

\--------------------------------------------------**学会选择和坚持，就赢得了人生的主动权。**\--------------------------------------------------

[Link 1]: https://download.csdn.net/download/sujin_/10748970