给文字添加阴影—text-shadow属性

text-shadow使用方法

text-shadow: length length length color

前三个length分别指阴影离开文字的横方向距离、纵方向距离和阴影的模糊半径，color指阴影的颜色。

div {
    text-shadow: 5px 5px 5px green;
    font-size: 50px;
}
<div>你好</div>

效果如图：

位移距离

text-shadow属性的参数中，前两个参数为阴影离开文字的横方向位移距离和纵方向位移距离。必须要指定这两个参数，可以对这两个参数指定负数值。

div {
    text-shadow: -15px 10px 5px green;
    font-size: 50px;
    margin-left:100px;
}

阴影的模糊半径

第三个参数是阴影的模糊半径，代表阴影向外模糊时的模糊范围。这个半径的值越大，则阴影向外模糊的范围也就越大。

div{
    text-shadow: 5px 5px 20px green;
    font-size: 50px;
}

模糊半径参数为可选参数，省略这个参数时，该参数默认为0，代表阴影不向外模糊。

阴影的颜色

第四个参数是绘制阴影时使用的颜色，该参数可以放在其他三个参数之前，也可放在其他三个参数之后。该参数为可选参数，不对这个参数指定时在CSS2中使用color属性中的颜色，也就是文字颜色。CSS3中使用浏览器指定的默认色。

指定多个阴影

可以使用text-shadow属性来给文字指定多个阴影，并且针对每个阴影使用不同颜色。指定多个阴影时使用逗号将多个阴影进行分隔。

.div1{
    text-shadow: 5px 5px 5px,15px 15px 5px red,25px 25px 5px green;
    font-size: 40px;
}

让文本自动换行—word-break属性

浏览器的自动换行

浏览器本身都自带着让文本自动换行的功能。在浏览器中显示文本的时候，会让文本在浏览器或div元素的右端自动实现换行。对于字母，浏览器会在半角空格或连字符的地方自动换行，而不会在单词的当中突然换行。对于中文来说，可以在任何一个中文字后面进行换行。
如果中文中含有字母，浏览器也会在半角空格或连字符的地方进行换行，而不会在单词中间强制换行。
当中文当中含有标点符号的时候，浏览器总是不可能让标点符号位于一行文字的行首，通常将标点符号以及它前面的一个文字作为一个整体来统一换行。

指定自动换行

可以使用word-break属性决定自动换行的处理方法。

.div1{ word-break: keep-all; }

word-break属性可以指定的值：

让长单词与URL地址自动换行—word-wrap属性

对于字母来说，浏览器在半角空格或连字符的地方进行换行。因此，浏览器不能给较长的单词自动换行。当浏览器窗口比较窄的时候，文字会超出浏览器的窗口，浏览器下部出现滚动条，让用户通过拖动滚动条的方法来查看没有在当前窗口显示的文字。
word-wrap属性可以实现长单词与URL地址的自动换行。

div{
    word-wrap: break-word;
}

word-wrap属性可以使用的属性值为normal与break-word。使用normal属性值时浏览器保持默认处理，只在半角空格或连字符的地方进行换行。使用break-word时浏览器可在长单词或URL地址内部进行换行。

使用服务器端字体—Web Font与@font-face属性

使用服务器端字体

可以使用@font-face属性来使用服务器端字体。

@font-face {
    font-family: WebFont;
    src: url('font/微软雅黑Light_1.0.ttc') format("opentype");
    font-weight: normal;
}

在font-family属性中使用WebFont来声明使用服务器端的字体。在src属性中指定服务器端字体的字体文件所在路径。在format属性中声明字体文件的格式，可以省略文件格式的声明而单独使用src属性值。
可以使用的文件格式为OpenType文件格式和TrueType文件格式，使用OpenType格式时将format属性值设定为opentype，使用TrueType格式时将format属性值设定为truetype，OpenType格式的文件扩展名为.otf，TrueType文件格式的扩展名为.ttf。
综合示例：

<style type="text/css">
@font-face{
    font-family: WebFont;
    src: url('Fontin_Sans_R_45b.otf') format("opentype");
    font-weight: normal;
}
h1{
    font-family: WebFont; 
    font-size: 60px;
    text-align: center;
    border: solid 1px #4488aa;
    margin: 20px;
    padding: 5px;
}
address{
    font-family: WebFont; 
    font-size: 14px;
    font-style: normal;
    text-align: center;
    margin: 20px;
    padding: 5px;
}
</style>
//HTML
<h1>Cascading Style Sheets</h1>
<address>
This page uses the 
<a href="http://www.josbuivenga.demon.nl/fontinsans.html">
Fontin Sans font by exljbris.
</a>
</address>

定义斜体或粗体字体

在定义字体的时候，可以将字体定义为斜体字或者粗体字。在使用服务器端字体的时候，需要根据是斜体还是租体，使用不同的字体文件。

<style type="text/css">
@font-face{
    font-family: WebFont;
    src: url('Fontin_Sans_R_45b.otf') format("opentype");
}
@font-face{
    font-family: WebFont;
    font-style: italic;
    src: url('Fontin_Sans_I_45b.otf') format("opentype");
}
@font-face{
    font-family: WebFont;
    font-weight: bold;
    src: url('Fontin_Sans_B_45b.otf') format("opentype");
}
@font-face{
    font-family: WebFont;
    font-style: italic;
    font-weight: bold;
    src: url('Fontin_Sans_BI_45b.otf') format("opentype");
}
div{
    font-family: WebFont;
    font-size: 40px;
}
div#div1 {
    font-style: normal;
    font-weight: normal;
}
div#div2 {
    font-style: italic;
    font-weight: normal;
}
div#div3 {
    font-style: normal;
    font-weight: bold;
}
div#div4 {
    font-weight: bold;
    font-style: italic;
}
</style>
//HTML
<div id="div1">Text Sample1</div>
<div id="div2">Text Sample2</div>
<div id="div3">Text Sample3</div>
<div id="div4">Text Sample4</div>

显示客户端本地的字体

@font-face属性不仅可以用于显示服务器端的字体，也可以用来显示客户端本地的字体。需要将字体文件路径的URL属性值修改为local()形式的属性值，并且在local后面的括号中写入使用的字体。

@font-face{
    font-family: Arial;
    src: local('Arial');
}
@font-face {
    font-family: Arial;
    font-weight: bold;
    src: local('Arial Black');
}
div{
    font-family: Arial;
    font-size: 40px;
}
div#div1 {
    font-weight: normal;
}
div#div2 {
    font-weight: bold;
}
</style>
//HTML
<div id="div1">Text Sample1</div>
<div id="div2">Text Sample2</div>

使用@font-face属性显示客户端本地字体的好处是可以让浏览器在对字体进行显示时首先在客户端本地寻找是否存在该字体，当客户端寻找不到时可以使用服务器端的字体。

@font-face {
    font-family: HyHelvetica;
    src: local("Helvetica Neue"),
    url(HqOpenHodernaReqular.ttf);
}

属性值的指定

@font-face属性中可以指定的属性值：

修改字体种类而保持字体尺寸不变一font-size-adjust属性

如果改变了字体的种类，则页面中所有使用该字体的文字大小都可能发生变化，从而使得原来安排好的页面布局产生混乱。
font-size-adjust属性可以在保持文字大小不发生变化的情况下改变字体的种类。

font-size-adjust属性的使用方法

它需要使用每个字体种类自带的一个aspect值(比例值)。
aspect值可以用来在将字体修改为其他字体时保持字体大小基本不变。这个aspect值的计算方法为x-height值除以该字体的尺寸，x-height值是指使用这个字体书写出来的小写x的高度(像素为单位)。如果某个字体的尺寸为100px时，x-height值为58像素，则该字体的aspect值为0.58 ，因为字体的x-height值总是随着字体的尺寸一起改变的，所以字体的aspect值都是一个常数。

div{
    font-size:16px;
    font-family:Times New Roman,
    font-size-adjust:0.46;
}

浏览器对于aspect值的计算万法

在font-size-adjust属性中指定aspect值并且将字体修改为其他字体后，浏览器对于修改后的字体尺寸的计算公式为：c = (a/b)s。
其中，a表示实际使用的字体的aspect值，b表示修改前字体的aspect值，s表示指定的字体尺寸，c为浏览器实际显示时的字体尺寸。
如果想将16px的Times New Roman字体修改为Comic Sans MS字体，字体大小仍然保持16px的Times New Roman字体的大小，则需要执行如下步骤：
1 )查得Times New Roman字体的aspect值为0.46，

2. 查得Comic Sans MS字体的aspect值为0 .54，
3. 将0.54除以0.46后得到近似值1.17,
4. 因为需要让浏览器实际显示的字体尺寸为16px，所以将16除以1.17，得出大约14px，然后在样式中指定字体尺寸为14px。也就是说，14px的Comic Sans MS相当于16px的TimesNew Roman字体。

可以根据需要对aspect值进行微调以达到最满意的效果，也可以将font-size-adjust属性的属性值设为none，设定为none的意思等同于不对font-size-adjust属性进行设置，按照字体原来的大小显示。

<style type="text/css">
div#div1{
    font-size: 16px;
    font-family: Comic Sans MS;
    font-size-adjust:0.54;
}
div#div2{
    font-size: 14px;
    font-family: Times New Roman;
    font-size-adjust:0.46;
}
div#div3{
    font-size: 16px;
    font-family: Times New Roman;
    font-size-adjust:0.46;
}
</style>
//HTML
<div id="div1">
  It is fine today. Never change your plans because of the weather.
</div>
<div id="div2">
  It is fine today. Never change your plans because of the weather.
</div>
<div id="div3">
  It is fine today. Never change your plans because of the weather.
</div>
// 修改第二个div的样式
div#div2{
    font-size: 14px;
    font-family: Comic Sans MS;
    font-size-adjust:0.49;
}