15CSS3文本与字体

[目录]

目录

• [目录]
  • 一、CSS3文本
  • 二、CSS3字体

一、CSS3文本

1. CSS3文本阴影

• text-shadow属性：应用于阴影文本text-shadow:h-shadow v-shadow blur color;
• text-outline属性：规定文本轮廓text-outline:thickness blur color;；任何主浏览器都不支持text-outline属性

2. CSS3换行

• word-break属性：规定自动换行的处理方法word-break:nomal|break-all|keep-all;
• word-wrap属性允许长单词或URL地址换行到下一行word-wrap:nomal|break-word;

3. CSS3新属性

• text-align-last属性：规定如何对齐文本的最后一行text-align-last:auto|left|right|center|justify|start|end|initial|inherit;；text-align-last属性只有IE支持，在Firefox中需要加上其前缀“-moz”,chrom50+，并且只有在text-align属性中设置为“justify”时才起作用
• text-overflow属性：规定当文本溢出包含元素时发生的事情text-overflow:clip|ellpsis|string;

二、CSS3字体

1. CSS3 @font-face的语法规则

   @font-face{
       font-family:<YourWebFontName>;//字体名称
       src:<source>[<format>][<source>[format:]];//字体存放路径，可以有多个
       [font-weight:<weight>];
       [font-style:<style>];
   }
   

2. CSS3 @font-face的取值说明

• YourWebFontName：自定义的字体名称，他将被引用到Web元素中的font-family
• source：自定义的字体存放路径可以是相对路径，也可以是绝对路径
• format：自定义字体的格式，主要用来帮助浏览器识别
• weight和style：weight定义字体是否为粗体，style主要定义字体样式，如斜体

3. CSS3 @font-face的字体格式

• TrueType(.ttf)格式：.ttf字体是Windows和Mac的最常见的字体，是一种RAW格式，因此他不为网站优化
• OpenType(.otf)格式：.otf字体被认为是一种原站的字体格式，其内置在TureType的基础上，所以也提供了更多的功能
• WebOpenFontFormat(.woff)格式：.woff字体是Web字体中最佳格式，他是一个开放的TureType/OpenType的压缩版本，同时也支持元数据包的分离
• EmbeddedOpenType(.eot)格式：.eot字体是IE专用字体，可以从TrueType创建此格式字体
• SVG(.svg)格式：.svg字体是基于SVG字体渲染的一种格式

4. CSS3 @font-face字体的应用，推荐通用模板

   @font-face{
       font-family:'YourWebFontName';
       src:url('YourWebFontName.eot');/*IE9 Compat Modes*/
       src:url('YourWebFontName.eot?#iefix')format('embedded-opentype'),/*IE6--IE8*/
           url('YourWebFontName.ttf')format('truetype'),/*Safari,Android,iOS*/
           url('YourWebFontName.woff')format('woff'),/*Modern Browser*/
           url('YourWebFontName.svg#YourWebFontName')format('svg');/*Legacy iOS*/
   }
   

5. CSS3获取特殊字体
   Fontsquirrel