15CSS3文本与字体

[目录]

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

一、CSS3文本

CSS3文本阴影

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

CSS3换行

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

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字体

CSS3 @font-face的语法规则

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

CSS3 @font-face的取值说明

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

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字体渲染的一种格式

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*/
}

CSS3获取特殊字体
Fontsquirrel

posted @ 2020-06-03 09:44 a_哆肉阅读(150) 评论(0) 编辑收藏举报

如果。。。

15CSS3文本与字体

[目录]

一、CSS3文本

二、CSS3字体

公告