CSS3文本与字体

2019-08-23 18:35:10 浏览数 (1)

一、CSS3 换行

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

代码语言:javascript复制
word-break: normal / break-all / keep-all;

/*
normal:使用浏览器默认的换行规则
break-all:允许在单词内换行
keep-all:只能在半角空格或连字符处换行
*/

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

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

代码语言:javascript复制
word-wrap: normal / break-word;

/*
normal:只在允许的断字点换行(浏览器保持默认处理)
break-word:在长单词或 URL 地址内部进行换行
*/

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

二、CSS3 新文本属性

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

代码语言:javascript复制
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(溢出文本的显示 / 隐藏)

代码语言:javascript复制
overflowt: visible / hidden;
代码语言:javascript复制

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

代码语言:javascript复制
text-overflow: clip / ellipsis / string;

/*
clip:修剪文本
ellipsis:显示省略符号“…”来代表被修剪的文本
string:使用给定的字符串来代表被修剪的文本
*/

兼容性:IE6.0 、FireFox7.0 、Chrome4.0 、Safari3.1 、Opera11.1 (9.0 -o-)

4、text-shadow(文本阴影)

代码语言:javascript复制
text-shadow: h-shadow v-shadow blur color;

兼容性:IE10 、FireFox3.5 、Chrome4 、Safari4 、Opera9.5

三、CSS3 字体

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

代码语言:javascript复制
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字体的应用

通用模版
代码语言:javascript复制
@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

0 人点赞