CSS3文本
文本阴影：text-shadow属性
- 概念：应用于阴影文本
- 语法：text-shadow:h-shadow v-shadow blur color;
- 参数：h-shadow：水平偏移，v-shadow：数值偏移，blur：模糊距离，color：颜色
text-shadow: 5px 5px 5px red;
文本轮廓：text-outline属性
- 概念：规定文本轮廓
- 语法：text-outline: thickness blur color;
- 参数：thickness：宽度值
- 现状：任何主流浏览器都不兼容text-outline属性
换行1：word-break属性
- 概念：规定自动换行的处理方法
- 语法：word-break: normal | break-all | keep-all
- 参数：
normal：浏览器默认的换行规则
break-all：在改换行的地方换行，比如一行写满
keep-all：半角空格或者连字符处换行 - 补充
这个属性主要针对英文，如果中文的话，建议用normal。
中文的break-all没有任何意义，中文的keep-all会在标点符号处换行。
h1:nth-child(1) { word-break: normal; }
h1:nth-child(2) { word-break: break-all; }
h1:nth-child(3) { word-break: keep-all; }
换行2：word-wrap属性
- 概念：允许长单词或URL地址换行到下一行
- 语法：word-wrap: normal | break-word
- 参数：
normal（默认）：容器内放不下会溢出
break-word：容器内放不下会自动换行 - 补充：这个属性主要针对英文
h1:nth-child(1) { word-wrap: normal; }
h1:nth-child(2) { word-wrap: break-word; }
CSS3新文本属性1：text-align-last属性
- 概念：规定如何对齐文本的最后一行
- 语法：text-align-last: auto | left | right | center | justify | start | end | initial | inherit
- 注意：
此属性只有IE支持，其他浏览器需要加前缀
只有在text-align属性设置为"justify"时才起作用
h1:nth-child(1) { text-align-last: auto; } // 自动对齐(左对齐)，默认值
h1:nth-child(2) { text-align-last: left; } // 左对齐
h1:nth-child(3) { text-align-last: right; } // 右对齐
h1:nth-child(4) { text-align-last: center; } // 居中对齐
h1:nth-child(5) { text-align-last: justify; } // 两端对齐，均分一行显示文字
h1:nth-child(6) { text-align-last: start; } // 与主流一致，主流左对齐，最后一行左对齐
h1:nth-child(7) { text-align-last: end; } // 与主流相反，主流左对齐，最后一行右对齐
h1:nth-child(8) { text-align-last: initial; } // 属性默认值
h1:nth-child(9) { text-align-last: inherit; } // 继承父元素
CSS3新文本属性2：text-overflow属性
- 概念：规定当文本溢出包含元素时发生的事情
- 语法：text-overflow：clip | ellipsis | string
- 参数：
clip：多出来的部分会被切掉
ellipsis：多出来部分会以省略号显示
string：自定义提示符号，这个只有火狐浏览器才兼容 - 补充：记得加上overflow:hidden，否则效果无法显示
h1:nth-child(1) { text-overflow: clip; }
h1:nth-child(2) { text-overflow: ellipsis; }
h1:nth-child(3) { text-overflow: '>>'; }
CSS3字体
让网站开发不再局限于安全字体(系统自带字体，比如微软雅黑)。思路是把字体文件放在服务器中，当加载网页的时候，会把字体文件也加载下来。
@font-face的语法规则
// 推荐通用模板
<style type="text/css">
@font-face {
font-family: 'myfont';
// 字体取值(font-family)：自定义字体名称，它将被引用到Web元素中的font-family
src: url('font/myFont.eot');
// 字体取值(url)：自定义字体的存放路径，相对路径(建议)或绝对路径都可以
// 兼容IE9以上浏览器
src: url('font/myFont.eot?#iefix') format('embedded-opentype'),
// 兼容IE6 ~ IE8浏览器
url('font/myFont.ttf') format('truetype'),
// 兼容手机端浏览器(Safari，Android，iOS)
url('font/myFont.woff') format('woff'),
// 兼容所有浏览器(Modern Browsers)
url('font/myFont.svg#myFont') format('svg');
// 字体取值(format)：自定义字体的格式，主要用来帮助浏览器识别
[font-weight: <weight>] // 字体取值(font-weight)：定义字体是否为粗体，选填
[font-style: <style>] // 字体取值(font-style)：定义字体样式(比如斜体)，选填
}
// 用法
h1 {
font-family: 'myfont';
}
</style>
@font-face的字体格式
- TrueType(.ttf)格式
是windows和mac的最常见字体，是一种RAW格式，因此它不为网站优化 - OpenType(.otf)格式
被认为是一种原始的字体格式，其内置在TrueType的基础上，所以也提供了更多的功能 - Web Open Font Format(.woff)格式
是Web字体中最佳格式，它是一个开放的TrueType/OpenType的压缩版本，同时也支持元数据包的分离
注意：手机端不兼容 - Embedded Open Type(.eot)格式
是IE专用字体，可以从TrueType创建此格式字体 - SVG(.svg)格式
是基于SVG字体渲染的一种格式
获取特殊字体
一般情况下，从网上下载下来的字体文件是ttf格式的字体文件，那怎样获得其他格式的字体文件呢？这里介绍一个比较好用的在线字体转换工具：Fontsquirrel
步骤1：点击[UPLOAD FONTS]按钮上传需要转换的字体文件
步骤2：选中Agreement，否则不能转换
步骤3：选中EXPERT...，在展开的地方选择转换后的字体文件[WOFF，WOFF2，SVG，EOT Compressed]，
步骤四：点击底部的[DOWNLOAD YOUR KIT]按钮，开始下载目标字体文件
