CSS3文本 字体格式

CSS3文本阴影 — text-shadow

1、应用于阴影文本
2、语法：text-shadow: h-shadow（水平偏移） v-shadow（垂直偏移） blur（模糊距离） color（颜色）
3、兼容：ie10+ firefox3.5+ chrome4+ safari4+ opera9.5+
4、注意：模糊程度不能是负数，不然会失去效果

text-outline属性

1、规定文本轮廓
2、语法：text-ouotline: thickness（宽度值） blur（轮廓描边的模糊程度） color（轮廓的颜色）
3、兼容性：任何浏览器暂时不支持这个属性

CSS3换行 — word-break

1、规定自动换行的处理方法
2、语法：word-break: normal（正常） break-all（允许在单词内换行） keep-all（只能在半角空格和连字符处换行）
3、兼容：ie5.5+ firefox15+ chrome4+ safari3.1+ opera15+
4、注意：此属性指定非CJK脚本的断行规则 — CJK(中日韩)脚本

CSS3换行 — word-wrap

1、允许长单词或者url地址换行到下一行
2、语法：word-wrap: normal break-word（以断开的文字进行换行）
3、兼容性：ie5.5+ firefox3.5+ chrome23+ safari6.1+ opera12.1+

CSS3新文本属性 — text-align-last属性

1、规定如何对其文本的最后一行
2、语法：text-align-last:

1. auto — 默认左对齐
2. left — 左对齐
3. 、right — 右对齐
4. center
5. justify
6. strat — 随大流
7. end — 与文章相反设置
8. initail — 默认和auto
9. inherit — 继承父元素

CSS3新文本 — text-overflow属性

1、规定当文本溢出包含元素时发生的事情
2、语法：text-overflow

1. clip — 溢出部分会修剪掉
2. ellipsis — 溢出部分会会以省略号表示
3. string — 只能是火狐支持，表示以我自定义的方式对溢出部分自定义

3、兼容：ie6+ firefox7+ chrome4+ safari3.1+ opera11.1+（9.0 -o-）
4、注意：配合与overflow:hidden一起使用

CSS3字体 — @fontface语法规则 — @fontface是css3的一个模块

课程介绍：

1. @fontface的语法规则
2. @fontface的取值说明
3. @fontface的字体格式
4. @fontface的字体应用
5. CSS3获取特殊字体

语法规则：

@fontface{
    font-family:<yourwebfontname>:  字体名称
  src:<source>[<format>],<source>[<format>]; 字体存放路径，可多个
  [font-weight:<字体加粗>]
  [font-style:字体样式]
}

兼容：ie9+ firefox3.5+ chrome4+ safari3.2+ opera10.1+

取值说明

1、yourwebfontname： 自定义名称他将被引用到web元素的font-family中
2、source：自定义字体存放的路径，可以是相对也可以是绝对
3、format：自定义字体的格式，主要用来帮助浏览器识别的
4、weight和style：— normal 和 blod加粗

1. weight：定义字体是否加粗
2. style定义字体样式，比如斜体

字体格式

1、TrueType — .ttf — 是windows和mac最常见的字体，是一种raw格式，因此他不为网站优化
兼容：ie9+ firefox3.5+ chrome4+ safari3+ opera10+ iosmobile — safari4.2+
2、OpenType — .otf — 被认为是一种原始的字体格式，是内置在TrueType基础上，所以也提供了更多的功能
兼容：除了ie浏览器不兼容之外，其余同上
3、web open font format — .woff — 是web字体中最佳的格式，他是一个开放的TrueType /OpenType 的压缩版本（压缩版本小，占用内存小，加快网页的运行速度），同时也支持元数据包的分离
兼容：ie9+ firefox3.5+ chrome6+ safari3.6+ opera11.1+ — 苹果手机端不支持
4、embedded open type — .eot — 是IE专用字体，可以从TrueType 创建此格式的字体
兼容：ie4+

5、svg — .svg 是基于svg字体渲染的一种格式（svg起始可以渲染图片的一种字体格式）
兼容：ie和火狐不兼容，chrome4+ safari3.1+ opera10+ iosmobile — safari3.2+

字体应用

1、大部分支持 — .woff .eot 效果更好的话，更多浏览器支持 — .svg

推荐通用模板

@font-face {
            font-family: 'myfont';   自定义名称，要有意义，不准数字
            src: url('font/myFont.eot');  兼容ie9以上版本
            src: url('font/myFont.eot?#iefix') format('embedded-opentype'),兼容ie6-8版本
            url('font/myFont.ttf') format('truetype'),主要针对手机端浏览器  safari  android  ios
            url('font/myFont.woff') format('woff'),兼容所有浏览器  
            url('font/myFont.svg#myFont') format('svg');针对ios端开发   legacy ios
            font-weight: bold;
            font-style: normal;
        }
会从上之下的兼容效果依次执行

获取特殊字体

如何CSS3特殊字体
Fontsquirrel:
http://www.fontsquirrel.com/tools/webfont-generator
说明：这是获取字体的网站其中一种！

获取ttf格式字体较容易
http://www.downcc.com/k/ttfziti/