Page 156 - css揭秘

25 华丽的 & 符号

背景知识

通过 @font-face 规则实现基本的字体嵌入

难题

在文学作品的字体排印中，你会发现简写的 & 符号倍受推崇。没有其
他字符可以像精心设计的 & 那样迅速传递出优雅的气质。所有网站都殚精
竭虑，试图找出一种能够体现 & 字符之美的最佳字体。不过，可以显示出
优美 & 字符的字体往往并不适用于页面中的其他文本。毕竟对于标题来说，
真正美丽而优雅的效果正是来源于清爽的无衬线字体与华丽的衬线 & 符号之
间的对比。

图 5-18
绝大多数电脑都包含了某种具
有优美 & 符号的字体；从左到
右 的 字 体 分 别 为 Baskerville、
Goudy Old Style、Garamond 和
Palatino（均以斜体风格显示）
网页设计师在很早以前就意识到了这一点，但所能找到的实现方法却十
分粗糙和繁琐。这些方法往往要求我们通过脚本或纯手工地用 <span> 标签
把每个 & 符号包起来，就像这样：
HTML
HTML <span class="amp">&</span> CSS

然后，给 .amp 这个类指定我们想要的字体样式：

.amp {
font-family: Baskerville, "Goudy Old Style",
Garamond, Palatino, serif;
font-style: italic;
}

这种方法确实可以奏效，你可以在图 5-19 中看到美化前后的对比图。
但是，这个实现方法相当麻烦，而且有时完全行不通：在某些情况下（比如
在 CMS 环境下），我们根本无法轻易地修改 HTML 结构。难道不能让 CSS 图 5-19
这个“HTML & CSS”标题中的
去单独美化某个特定字符吗？
& 符号在美化前后的效果对比

25 华丽的 & 符号 125

඀ࠡ JOEC