• CSS3 Web Fonts
• CSS3 Text

CSS3 Web 字体

@font-face 规则

Web字体允许设计者使用用户计算机上没有安装的字体。当你找到（或购买到）希望使用的字体，只需要将字体文件放到你的web服务器上，当需要时它会自动下载到用户计算机上。

你“自己的”字体需要使用 CSS3中的 @font-face 规则来定义。

浏览器兼容

字体格式

• TrueType Fonts (TTF)

TrueType 是一种在20世纪80年代末由 Apple 和 Microsoft 开发的字体标准，它同时是 Mac OS 和 Windows 操作系统上最常见的字体格式。

• OpenType Fonts (OTF)

OpenType 是一种可伸缩的电脑字体，以 TrueType 为基础构建并且是微软的注册商标；OpenType 字体今天常用于主要的计算机平台上。

• The Web Open Font Format (WOFF)

WOFF 是一种用于网页的字体格式，开发于2009年，如今成为W3C的推荐字体；WOFF实际上是增加了压缩和其它元数据的 OpenType 或 TrueType 字体，目标是支持在比较差的网络从服务器到客户端的字体分发。

• The Web Open Font Format (WOFF 2.0)

提供比 WOFF 1.0 更好压缩的 TrueType/OpenType 字体。

• SVG Fonts/Shapes

SVG 字体允许 SVG 在显示文本时用于字形，SVG 1.1 规范定义了一个字体模块允许在 SVG 文档中创建字体，也可以在 SVG 文档中使用 CSS，同时 @font-face 规则也可以在 SVG 文档中应用于文本。

• Embedded OpenType Fonts (EOT)

EOT 字体是一种由微软设计的简洁形式的 OpenType 字体，作为嵌入字体用于网页上。

字体格式的浏览器兼容

使用字体

在CSS3的 @font-face 规则中你需要先定义字体名称（例如，myFont），然后指定字体文件。

字体 URL 一定要使用小写字母，使用大写字母在IE中无法正常工作。

在HTML元素中使用字体时，使用 font-family 属性引入上面定义的字体名称（myFont）即可。如下所示：

1
2
3
4
5
6
7
8

@font-face {
    font-family: myFont;
    src: url(sansation_light.woff);
}
.font-demo {
    font-family: myFont;
}

hello world with sansation_light font.
hello world with default font.

当我们需要使用粗体文本时，必须添加另一个包含粗体文本描述符的 font-face 规则：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

@font-face {
    font-family: myFont;
    src: url(sansation_light.woff);
}
@font-face {
    font-family: myFont;
    src: url(sansation_bold.woff);
    font-weight: bold;
}
.font-demo-2 {
    font-family: myFont;
    font-weight: bold;
    font-size: 20px;
}

hello world with sansation_bold font.
hello world with default font.

“sansation_bold.woff” 文件是另一个字体文件，包含了 Sansation 字体的粗体字符；每当一段使用 myFont 字体的文本需要渲染为粗体时，浏览器就会应用它。

CSS3 字体描述符

CSS3 文本

CSS3 包含了几个新的文本特性，这里会介绍几个文件属性：

• text-overflow
• word-wrap
• word-break

浏览器兼容

text-workflow

CSS3 中的 text-overflow 属性指定如何将溢出不能显示的文本通知到用户，可以设置 clip 或者 ellipse。

• clip : 　不显示省略标记（…），而是简单地裁切
• ellipsis : 　当对象内文本溢出时显示省略标记（…）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

.text-demo {
    white-space: nowrap; 
    width: 208px; 
    border-bottom: 1px solid #000000;
    overflow: hidden;
    padding: 4px;
    display: inline-block;
}
.text-demo-1 {
    text-overflow: clip;
}
.text-demo-2 {
    text-overflow: ellipsis;
}
.text-demo-2:hover {
    text-overflow: inherit;
    overflow: visible;
}

这段文字有点长，200px的宽度无法完整显示
这段文字有点长，200px的宽度无法完整显示

word-wrap

1

word-wrap: normal | break-word

• normal ： 默认值，单词如果单词超长，会冲出边界（单个单词超长，在当前行显示）
• break-word ： 将内容在边界内换行，当单词在当前行放不下时，会自动切换到下一行（单个单词超长，在下一行显示）

word-break

1

word-break: normal | break-all | keep-all

• normal：默认值，中文到边界处的汉字换行，英文整个单词换行，如果出现某个单词长度过长，则会撑破容器，如果边框为固定属性，则后面部分将无法显示（单个单词长度超过容器长度）
• break-all：可以强行截断英文单词，强行换行
• keep-all：不允许字断开。如果是中文将把前后标点符号内的一个汉字短语整个换行，英文单词也整个换行，如果出现某个英文字符长度超过边界，则后面的部分将撑破容器，如果边框为固定属性，则后面部分无法显示