CSS3文本效果 、字体

1、 文本阴影

text-shadow向标题添加阴影:

h1
{
    text-shadow: 5px 5px 5px #FF0000;
}

2、 word-wrap自动换行

实例
允许对长单词进行拆分,并换行到下一行:

p {word-wrap:break-word;}

值 描述

normal 只在允许的断字点换行(浏览器保持默认处理)。

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

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

语法

text-overflow: clip|ellipsis|string;
描述
clip 修剪文本。
ellipsis 显示省略符号来代表被修剪的文本。
string 使用给定的字符串来代表被修剪的文本。

CSS3字体

在 CSS3 之前,web 设计师必须使用已在用户计算机上安装好的字体。

通过 CSS3,web 设计师可以使用他们喜欢的任意字体。当找到或购买到希望使用的字体时,可将该字体文件存放到 web 服务器上,它会在需要时被自动下载到用户的计算机上。

Firefox、Chrome、Safari 以及 Opera 支持 .ttf(True Type Fonts) 和 .otf (OpenType Fonts) 类型的字体。

Internet Explorer 9+ 支持新的 @font-face 规则,但是仅支持 .eot 类型的字体 (Embedded OpenType)。

示例:

使用您需要的字体

在新的 @font-face 规则中,您必须首先定义字体的名称(比如 myFirstFont),然后指向该字体文件。

如需为 HTML 元素使用字体,请通过 font-family 属性来引用字体的名称 (myFirstFont):



使用粗体字体
您必须为粗体文本添加另一个包含描述符的 @font-face:

@font-face
{
    font-family: myFirstFont;
    src: url('Sansation_Bold.ttf'),
         url('Sansation_Bold.eot'); /* IE9+ */
    font-weight:bold;
}

你可能感兴趣的:(HTML5)