在 Firefox 中显示如下:
(3)、其他新属性
下面是 CSS3 中增加的文本属性:
属性 说明
text-shadow 向文本添加阴影。
word-wrap 允许对长的不可分割的单词进行分割并换行到下一行。
text-justify 规定当 text-align 设置为 "justify" 时所使用的对齐方法。
text-overflow 规定当文本溢出包含元素时发生的事情。
text-outline 规定文本的轮廓。
text-align-last 设置如何对齐最后一行或紧挨着强制换行符之前的行。
text-emphasis 向元素的文本应用重点标记以及重点标记的前景色。
hanging-punctuation 规定标点字符是否位于线框之外。
punctuation-trim 规定是否对标点字符进行修剪。
text-wrap 规定文本的换行规则。
word-break 规定非中日韩文本的换行规则。
6、CSS3 字体网页是文字的载体,网页中展示最多的内容就是文字,即使是一个图片网页,但也离不开文字的描述。
而通过 CSS3 ,网页可以呈现不同的字体效果,而不必只是使用“web-safe”字体。
(1)、CSS3 @font-face 规则
在 CSS3 之前,网站中的字体必须使用用户计算机上已经安装好的字体,或者把想要的文字做成图片,以图片的方式展示具有特殊效果的文字。
而通过 CSS3,在网站中就可以使用任意的文字字体。
使用 CSS3 字体,只需要简单的将字体文件包含在网站中,它会自动下载给需要的用户。
网站中所使用的字体是在 CSS3 @font-face 规则中定义的。
@font-face 是 CSS3 中的一个功能模块,主要是把自定义的 Web 字体嵌入到网页中,是用于实现网页字体多样性的模块。@font-face 的作用是从网上下载并使用自定义字体,使页面显示字体不依赖用户的操作系统字体环境。
语法:
@font-face:{属性: 取值;}
@font-face 规则定义:
1 @font-face{ 2 font-family: 必需。字体名称; 3 src: url(必需。字体文件的 URL); 4 font-weight: 可选。字体粗细,默认是 "normal"。 5 font-style: 可选。字体样式,默认是 "normal"。 6 font-stretch: 可选。如何拉伸字体,默认是 "normal"。 7 }
注意:URL 请使用小写字母的字体,大写字母在 IE 中会产生意外的结果。
(2)、字体类型和浏览器支持
各版本的浏览器对于 Web 字体类型的支持各不相同,字体格式主要有以下几种:
Web Open Font Format、TrueType Format/OpenType Format、Embedded OpenType Format、SVG
①、Web Open Font Format(.woff 格式)
WOFF 是 W3C 标准推荐的一种 Web 字体格式,他是一个开放的 TrueType/OpenType 的压缩版本,所以 WOFF 字体通常比其它字体加载的要快些,而且这种字体格式还可以加入元信息和授权信息,因此得到了现代所有浏览器的支持。IE9+ 以及所有浏览器都支持该格式。
下面是 W3C中国 中的介绍:2014年5月8日,W3C的Web字体工作组(WebFonts Working Draft)发布了WOFF 2.0文件格式(WOFF File Format 2.0)的首份标准草案(First Public Working Draft)。该草案基于广泛使用的WOFF 1.0,提供增强的字体压缩功能,减少网络带宽的使用,同时WOFF 2.0仍将支持在移动设备等上的快速字体解压缩能力。WOFF 2.0结合了内容感知(content-aware)的预处理过程,以及改进的熵编码(entropy coding)技术,比WOFF 1.0采用的Flate压缩技术具有更好的性能。
注意:IE9+ 并不支持 WOFF 2.0 字体格式。
②、TrueType Format(.ttf 格式)和 OpenType Format(.otf 格式)