CSS3——文本与字体

CSS3文本

text-shadow属性

应用于阴影文本

语法text-shadow：h-shadow(水平阴影) v-shadow(垂直阴影) blur(阴影) color；blur属性值不能为负

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

语法：text-outline：thickness blur color；  目前任何主流浏览器都不支持该属性

---

word-break属性

规定自动换行的处理方法，是换行规则，中英文效果不一样

语法：word-break：normal / break-all / keep-all；

word-wrap属性：允许长单词或URL地址换行到下一行

语法：word-wrap：normal / break-word；

使用break-word可将长单词或者链接切断换行，对中文不起效果。

---

text-align-last属性

规定如何对齐文本的最后一行

语法：text-alignl-last：auto / left / right / center / justify / start / end / initial / inherit；

start：最后一行与上文的对齐方式相同。end：最后一行与上文的对齐方式相反，比如上面左对齐，则最后一行右对齐。

兼容性：Firefox中需要加上前缀-moz

注意：text-align-last属性只有在text-align属性设置为“justify”时才起作用。

---

text-overflow属性

规定当文本溢出包含元素时发生的事情

语法：text-overflow：clip(裁掉，溢出的部分不显示) / ellipsis(最后显示三个点，省略号) /string(自定义一个符号，最后一个只有火狐浏览器支持)；

该属性生效的前提时有一个 overflow：hidden；属性。

CSS3字体

@font-face是CSS3的一种模块，使网站的开发不局限于安全的字体，可以使用@font-face引入特殊字体。把字体文件也引入服务器中

@font-face的语法规则

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

@font-face的取值说明

YourWebFontName：自定义的字体名称，将被引用到Web元素中的font-family。

source：自定义的字体的存放路径，可以是相对路径也可以是绝对路径，建议使用相对路径。

format：自定义字体的格式，主要用来帮助浏览器识别。

@font-face的字体格式

1、TrueType(.ttf)格式

.ttf字体是Windows和Mac的最常见的字体，是一种RAW格式，因此它不为网站优化

2、OpenType(.opt)格式

.otf字体被认为是一种原始的字体格式，其内置在TrueType的基础上，所以也提供了更多的功能，不兼容ie浏览器。

3、WebOpenFontFormat(.woff)格式

.woff字体是Web字体中最佳格式，它是一个开放的TrueType / OpenType的压缩版本，同时也支持元数据包的分离。不兼容IOS手机浏览器

4、Embedded Open Type(.eot)格式

.eot字体是ie专用字体，可以从TrueType创建此格式字体，只兼容ie浏览器

5、SVG(.svg)格式

.svg字体是基于SVG字体渲染的一种格式

@font-face字体的应用

//模板：
@font-face {
    font-family: 'myfont';
    src: url('font/myFont.eot');
    src: url('font/myFont.eot?#iefix') format('embedded-opentype'),
         url('font/myFont.ttf') format('truetype'),
         url('font/myFont.woff') format('woff'),
         url('font/myFont.svg#myFont') format('svg');
}

获取特殊字体

网站：Fontsquirrel    https://www.fontsquirrel.com/tools/webfont-generator

上传自己的字体，勾选自己需要的字体格式，下载

使用特殊字体需要用户将特殊字体下载到本地，时间开销较大