CSS3笔记-文字与字体样式

1. 给文字添加阴影---text-shadow

text-shadow: 5px 5px 0 red;

值从左至右分别代表：阴影离开文字横向距离、纵向距离、模糊半径、阴影颜色
第4个值，在FireFox和Opera中可省略，会使用color属性的颜色。在Safari和Chrome中不能省略，否则无法绘制阴影。

2. 让文本自动换行---word-break

浏览器默认换行规则换行符合人们的自然写作方式。CSS3中可以使用word-break来自行决定换行的处理方式。这个属性是从IE中发展过来的。

使用浏览器默认换行规则：

word-break: normal;

连续中文之间不允许换行（IE支持，Safari与Chrome不支持）：

word-break: keep-all;

允许在单词内换行（可能会导致标点符号位于行首）：

word-break: break-all;

3. 单词与URL地址自动换行

word-wrap: break-word;

4. 使用服务端字体---Web Font与@font-face

在CSS3中，新增了Web Fonts功能，网页可以使用服务端字体，只要某个字体在服务端已安装，网页中就能够正常显示。

使用@font-face利用服务端字体：

/**
 * 声明使用服务端字体，并指定服务端字体位置和类型
 */
@font-face{
    font-family: WebFont; //使用WebFont声明使用服务端字体
    src: url('font/Fontin_Sans_R_45b.otf') format("opentype");
    font-weight: normal;
}
/**
 * 应用服务端字体样式
 */
hi{
    font-family: WebFont; // 字体应用到元素上
}

在src属性值指定服务端字体文件所在路径，在format属性值中声明字体文件的格式（可省略字体文件格式）。以上代码使用了exljbris字体公司免费提供的Fontin Sans字体，字体文件格式为OpenType。

目前为止，可以使用的文件格式为OpenType和TrueType，format值分别为opentype和truetype，文件扩展名分别为“.otf”和“.ttf”。另外，IE中，只能使用微软自带的Embedded的OpenType字体文件，文件扩展名为“.eot”，同时不需要使用format属性值。

使用服务端字体时，可以根据斜体还是粗体，使用不同的字体文件：

/**
 * 声明使用服务端字体，并指定服务端字体位置和类型
 */
@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: 14px;
}
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-style: italic;
    font-weight: bold;
}

5. 修改字体种类保持字体尺寸不变---font-size-adjust

使用每个字体种类自带的aspect值：

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

aspect值可以用来在将字体修改为其他字体时保持字体大小不变。
如果想将16px的Times New Roman字体修改为Comic Sans MS字体，字体大小仍然保持16px的话，则需要执行如下步骤：

1. 查得Times New Roman字体的aspect值为0.46

2. 查得Comic Sans MS字体的aspect值为0.54

3. 将0.54除以0.46后得到近似值1.17

4. 将16px除以1.17，得到大约14px，然后在样式中指定字体尺寸为14px。
   也就是说，14px的Comic Sans MS相当于16px的Times New Roman字体。

5. 使用rem字体单位

rem根据根元素的字体大小计算出实际的字体大小。过去我们使用em，em单位根据父元素字体大小来计算，因此，当我们将一个元素从一个父元素移动到另一个父元素中时很可能使得元素的字体大小产生变化。
除了em单位外，我们也使用px单位指定字体大小。但是，今天，由于web网站和应用程序可以被运行在各种移动设备中，如果只依靠像素来指定字体尺寸，则可能需要根据各种尺寸的屏幕来为元素指定各种尺寸的字体，这是件非常恼火的事。因此，我们需要使用rem单位。

除IE8外，浏览器均支持rem单位：

html{font-size: 10px;}
/* 兼容IE8 */
body{font-size: 14px; font-size: 1.4rem;}
12size{font-size: 12px; font-size: 1.2rem;}
16size{font-size: 16px; font-size: 1.6rem;}

IE8也可以通过引入rem.js文件来兼容rem