HTML5技术

CSS3 基本知识 - 彼岸时光(9)

字号+ 作者:H5之家 来源:H5之家 2016-03-11 17:01 我要评论( )

在 Firefox 中显示如下: (3)、其他新属性 下面是 CSS3 中增加的文本属性: 属性 说明 text-shadow 向文本添加阴影。 word-wrap 允许对长的不可分割的单词进行分割并换行到下一行。 text-justify 规定当 text-align

   在 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 格式)

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • CSS3 选择器 - Glunefish

    CSS3 选择器 - Glunefish

    2017-04-22 09:00

  • HTML5和CSS3 - 奔跑在起跑线佼佼者

    HTML5和CSS3 - 奔跑在起跑线佼佼者

    2017-04-20 13:00

  • 【CSS3】精美横向滚动菜单按钮 - Glunefish

    【CSS3】精美横向滚动菜单按钮 - Glunefish

    2017-04-14 14:00

  • 【CSS3动画】下拉菜单模拟 - Glunefish

    【CSS3动画】下拉菜单模拟 - Glunefish

    2017-04-12 13:00

网友点评
>