HTML-从零开始的学习过程（12）

CSS3文本和字体

CSS3文本阴影 – text-shadow

• 语法：text-shadow: h-shadow（水平偏移） v-shadow（垂直偏移） blur（模糊距离）
  color（颜色）；
• 兼容：ie10+ 、firefox3.5+ 、chrome4+ 、safari4+ 、 opera9.5+；
• 注：模糊程度不能是负数，不然会失去效果；

text-outline属性-规定文本轮廓

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

CSS3换行 – word-break

• 规定自动换行的处理方法

• 语法：word-break: normal（正常）、
  break-all（允许在单词内换行）、keep-all（只能在半角空格和连字符处换行）；

• 兼容性：ie5.5+ 、 firefox15+ 、 chrome4+、 safari3.1+ 、 opera15+；

• 注：此属性指定非CJK脚本的断行规则；

• 注：对于中文，normal和break-all区别不大
  对于英文，normal和keep-all区别不大，break-all则会拆开单词进行强制断行

CSS3换行 – word-wrap

• 允许长单词或者url地址换行到下一行；

• 语法：word-wrap: normal 、break-word（以断开的文字进行换行）；

• 兼容性：ie5.5+ 、 firefox3.5+、 chrome23+ 、 safari6.1+ 、opera12.1+；

text-align-last属性

• 规定如何对其文本的最后一行；
• 语法：text-align-last:
  auto – 默认左对齐
  left – 左对齐
  right – 右对齐
  center–居中
  justify–两端对齐
  strat – 随主体形式
  end – 与文章相反设置
  initail – 默认和auto
  inherit – 继承父元素

text-overflow属性

• 规定当文本溢出包含元素时发生的事情；
• 语法：text-overflow
  clip – 溢出部分会修剪掉
  ellipsis – 溢出部分会会以省略号表示
  string – 只能是火狐支持，表示以我自定义的方式对溢出部分自定义
• 兼容性：ie6+ firefox7+ chrome4+ safari3.1+ opera11.1+（9.0 -o-）；
• 注：配合与overflow:hidden一起使用；

@fontface

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

兼容性：ie9+、 firefox3.5+ 、chrome4+、safari3.2+、opera10.1+
推荐模板：

@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;
    }