CSS3文本和字体 学习打卡

本节介绍

1. CSS3文本阴影
2. CSS3换行
3. CSS3新文本属性

CSS3文本阴影

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

CSS3文本轮廓

1、text-outline 规定文本轮廓
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(中日韩)脚本

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:
auto – 默认左对齐
left – 左对齐
right – 右对齐
center
justify
strat – 随大流
end – 与文章相反设置
initail – 默认和auto
inherit – 继承父元素

text-overflow

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

CSS3字体

@fontface是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加粗
weight：定义字体是否加粗
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+

字体应用

大部分支持 – .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;
    }
/*会从上之下的兼容效果依次执行*/

获取特殊字体

• Fontsquirrel:http://www.fontsquirrel.com/tools/webfont-generator
  说明：这是获取字体的网站其中一种！
• 获取ttf格式字体较容易 http://www.downcc.com/k/ttfziti/

思维导图