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]按钮，开始下载目标字体文件