CSS3第2讲_字体.doc

CSS3 字体CSS3 font-face 规则在 CSS3 之前，web 设计师必须使用已在用户计算机上安装好的字体。通过 CSS3，web 设计师可以使用他们喜欢的任意字体。当您您找到或购买到希望使用的字体时，可将该字体文件存放到 web 服务器上，它会在需要时被自动下载到用户的计算机上。您“自己的”的字体是在 CSS3 font-face 规则中定义的。浏览器支持Firefox、Chrome、Safari 以及 Opera 支持 .ttf (True Type Fonts) 和 .otf (OpenType Fonts) 类型的字体。Internet Explorer 9+ 支持新的 font-face 规则，但是仅支持 .eot 类型的字体 (Embedded OpenType)。注释：Internet Explorer 8 以及更早的版本不支持新的 font-face 规则。使用您需要的字体在新的 font-face 规则中，您必须首先定义字体的名称（比如 myFirstFont），然后指向该字体文件。如需为 HTML 元素使用字体，请通过 font-family 属性来引用字体的名称 (myFirstFont)：实例 font-facefont-family: myFirstFont;src: url(Sansation_Light.ttf), url(Sansation_Light.eot); /* IE9+ */divfont-family:myFirstFont;使用粗体字体您必须为粗体文本添加另一个包含描述符的 font-face：实例font-facefont-family: myFirstFont;src: url(Sansation_Bold.ttf), url(Sansation_Bold.eot); /* IE9+ */font-weight:bold;文件 Sansation_Bold.ttf 是另一个字体文件，它包含了 Sansation 字体的粗体字符。只要 font-family 为 myFirstFont 的文本需要显示为粗体，浏览器就会使用该字体。通过这种方式，我们可以为相同的字体设置许多 font-face 规则。CSS3 字体描述符下面的表格列出了能够在 font-face 规则中定义的所有字体描述符：描述符值描述font-familyname必需。规定字体的名称。srcURL必需。定义字体文件的 URL。font-stretch normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded可选。定义如何拉伸字体。默认是 normal。font-style ormal italic oblique可选。定义字体的样式。默认是 normal。font-weight normal bold 100 200 300 400 500 600 700 800 900可选。定义字体的粗细。默认是 normal。unicode-rangeunicode-range可选。定义字体支持的 UNICODE 字符范围。默认是 U+0-10FFFF。CSS3 文本效果CSS3 文本效果CSS3 包含多个新的文本特性。在本章中，您将学到如下文本属性： text-shadow word-wrap浏览器支持属性浏览器支持text-shadowword-wrapInternet Explorer 10、Firefox、Chrome、Safari 以及 Opera 支持 text-shadow 属性。所有主流浏览器都支持 word-wrap 属性。注释：Internet Explorer 9 以及更早的版本，不支持 text-shadow 属性。CSS3 文本阴影在 CSS3 中，text-shadow 可向文本应用阴影。您能够规定水平阴影、垂直阴影、模糊距离，以及阴影的颜色：实例向标题添加阴影：h1text-shadow: 5px 5px 5px #FF0000;CSS3 自动换行单词太长的话就可能无法超出某个区域：This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.在 CSS3 中，word-wrap 属性允许您允许文本强制文本进行换行 - 即使这意味着会对单词进行拆分：This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.下面是 CSS 代码：实例允许对长单词进行拆分，并换行到下一行：p word-wrap:break-word;新的文本属性属性描述CSShanging-punctuation规定标点字符是否位于线框之外。3punctuation-trim规定是否对标点字符进行修剪。3text-align-last设置如何对齐最后一行或紧挨着强制换行符之前的行。3text-emphasis向元素的文本应用重点标记以及重点标记的前景色。3text-justify规定当 text-align 设置为 justify 时所使用的对齐方法。3text-outline规定文本的轮廓。3text-overflow规定当文本溢出包含元素时发生的事情。3text-shadow向文本添加阴影。3text-wrap规定文本的换行规则。3word-break规定非中日韩文本的换行规则。3word-wrap允许对长的不可分割的单词进行分割并换行到下一行。3h1 text-sha