CSS3文本与字体

2022-11-03 21:35:42

一、CSS3 换行

1、word-break（规定自动换行的处理方法）

word-break: normal / break-all / keep-all;

/*

normal：使用浏览器默认的换行规则

break-all：允许在单词内换行

keep-all：只能在半角空格或连字符处换行

*/

兼容性：IE5.5+、FireFox15+、Chrome4+、Safari3.1+、Opera15+

2、word-wrap（允许长单词或 URL 地址换行到下一行）

word-wrap: normal / break-word;

/*

normal：只在允许的断字点换行（浏览器保持默认处理）

break-word：在长单词或 URL 地址内部进行换行

*/

兼容性：IE5.5+、FireFox3.5+、Chrome23+、Safari6.1+、Opera12.1+

二、CSS3 新文本属性

1、text-align-last（规定如何对齐文本的最后一行）

text-align-last: auto / left / right / center / justify / start / end / initial / inherit;

/*

auto：无特殊对齐方式

justify：内容两端对齐

start：内容对齐开始边界

end：内容对齐结束边界

*/

兼容性：text-align-last 属性只有IE支持，在Firefox中需要加上其前缀“-moz”, Chrom50.0.2661.102以上

注意（text-align-last 只有在 text-align 属性设置为 "justify" 时才起作用）

2、overflow（溢出文本的显示 / 隐藏）

overflowt: visible / hidden;

3、text-overflow（规定当文本溢出包含元素时发生的事情）

text-overflow: clip / ellipsis / string;

/*

clip：修剪文本

ellipsis：显示省略符号“…”来代表被修剪的文本

string：使用给定的字符串来代表被修剪的文本

*/

兼容性：IE6.0+、FireFox7.0+、Chrome4.0+、Safari3.1+、Opera11.1+（9.0 -o-）

4、text-shadow（文本阴影）

text-shadow: h-shadow v-shadow blur color;

兼容性：IE10+、FireFox3.5+、Chrome4+、Safari4+、Opera9.5+

三、CSS3 字体

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

font-family: <YourWebFontName>;

src: <source> [<format>][,<source> [<format>]]*;

     [font-weight: <weight>];

     [font-style: <style>];}

/*

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

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

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

weight：定义字体是否为粗体

style：定义字体样式，如斜体

*/

兼容性：IE9+、FireFox3.5+、Chrome4+、Safari3.2+、Opera10+

2、CSS3 @font-face的字体格式

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

兼容性：IE9+、FireFox3.5+、Chrome4+、Safari3+、Opera10+、IOS Mobile Safari4.2+

OpenType (.otf)（被认为是一种原始的字体格式，内置在TureType的基础上，所以也提供了更多的功能）

兼容性：FireFox3.5+、Chrome4+、Safari3.1+、Opera10+、IOS Mobile Safari4.2+

Web Open Font Format (.woff)（Web字体中最佳格式，是开放的TrueType/OpenType的压缩版本，同时也支持元数据包的分离）

兼容性：IE9+、FireFox3.5+、Chrome6+、Safari3.6+、Opera11.1+

Embedded Open Type (.eot)（IE专用字体，可以从TrueType创建此格式字体）

兼容性：IE4+

SVG (.svg)（基于SVG字体渲染的一种格式）

兼容性：Chrome4+、Safari3.1+、Opera10+、IOS Mobile Safari3.2+

3、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.woff') format('woff'), /* 所有主流浏览器 */

     url('YourWebFontName.ttf') format('truetype'), /* Safari, Android, iOS */

     url('YourWebFontName.svg#YourWebFontName') format('svg'); /* Legacy iOS */

}

字体文件+CSS模板一键生成网站：https://www.fontsquirrel.com/tools/webfont-generator

码农公寓