【CSS 25】文本溢出 text-overflow 整字换行 word-wrap 书写模式 writing-mode Web字体 @font-face 字体描述

文本效果

CSS 文本溢出、整字换行、换行规则以及书写模式
在本章中会使用到下面的属性：

1. text-overflow
2. word-wrap
3. word-break
4. writing-mode

文字溢出
CSS text-overflow 属性规定应如何向用户呈现未显示的溢出内容

p.test1 {
	white-space: nowrap;
	width: 200px;
	border: 1px solid #000000;
	overflow: hidden;
	text-overflow: clip;
}

p.test2 {
	white-space: nowrap;
	width: 200px;
	border: 1px solid #000000;
	overflow: hidden;
	text-overflow: ellipsis;
}

p.test1:hover, p.test2:hover {
	overflow: visible;
}

字换行
CSS word-wrap 属性使长文字能够被折断并换到下一行
如果一个单词太长而无法容纳在一个区域内，它会向外扩展
通过 word-wrap 属性，您可以强制对文本进行换行 - 即使这意味着在词中间将其拆分

p {
	word-wrap: break-word;
}

换行规则
CSS word-break 属性指定换行规则

连字符打断
p.test1 {
	word-break: keep-all;
}

任何字符处中断
p.test2 {
	word-break: break-all;
}

书写模式
CSS writing-mode 属性规定文本行是水平放置还是垂直放置

p.test1 {
	writing-mode: horizontal-tb;
}

span.test2 {
	writing-mode: vertical-rl;
}

p.test2 {
	writing-mode: vertical-rl;
}

---

Web 字体

CSS @font-face 规则
Web 字体允许 Web 设计人员使用用户计算机上未安装的字体
当您找到/购买了想要使用的字体后，只需将字体文件包含在您的 Web 服务器上，它将在需要时自动下载给用户
您的“自有”字体在 CSS @font-face 规则中进行定义

不同字体格式
TrueType 字体 (TTF)
TrueType 是 Mac OS 和 Microsoft Windows 操作系统最常用的字体格式

OpenType 字体 (OTF)
Web 开放字体格式 (WOFF)
Web 开放字体格式 (WOFF 2.0)

SVG 字体/形状
SVG 字体允许在显示文本时将 SVG 用作字形

嵌入式 OpenType 字体 (EOT)

使用您需要的字体
在 @font-face 规则中：首先定义字体的名称（例如 myFirstFont），然后指向该字体文件
提示：字体 URL 始终使用小写字母
如需将字体用于 HTML 元素，请通过 font-family 属性引用字体名称（myFirstFont）

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

* {
	font-family: myFirstFont;
}

使用粗体文本
您必须添加另一条 @font-face 规则，其中包含粗体文本的描述符

/*
文件 "sansation_bold.woff" 是另一个字体文件，其中包含 Sansation 字体的粗体字符。

每当带有 "myFirstFont" 字体族的一段文本应呈现粗体时，浏览器都会使用它。

这样，您就可以为同一字体设置许多 @font-face 规则
*/
@font-face {
	font-family: myFirstFont;
	src: url(sansation_light.woff);
}

@font-face {
	font-family: myFirstFont;
	src: url(sansation_bold.woff);
	font-weight: bold;
}

* {
	font-family: myFirstFont;
}

CSS 字体描述
下表列出了能够在 @font-face 规则内定义的所有字体描述符（font descriptor）

描述符	值	描述
font-family	name	必须：定义字体名称
src	URL	必须：定义字体文件URL
font-stretch	normal/condensed/expanded/…	可选：定义如何拉伸字体
font-style	normal/italic/oblique	可选：定义字体样式
font-weight	normal/bold/100/…	可选：定义字体的粗细