Page 163 - css揭秘

27 现实中的文字效果

背景知识
基本的 text-shadow

难题

在网页中，对文字进行艺术加工已经变得非常普遍了，比如凸版印刷效
果，当鼠标悬停时的模糊效果，浮雕（伪 3D）效果，等等。要达成这些效
果，我们往往会用到一系列精心排列的文本投影，并且需要明白我们的眼睛
是如何工作的，因为这些手段往往建立在视错觉的基础上。一旦你掌握了其
中的窍门，就可以很容易地把这些效果画出来，不过用开发工具把它们写出
来可就没那么容易了。
本篇攻略将专门讲解如何创建上述效果，你再也不需要一边挠头一边
问：“这个效果到底是怎么做出来的？”

图 5-27
在运用这些效果的时候，会很容
易损伤页面的可访问性，因此
千万不要忘记测试对比度，以确
保文本内容的可读性（在这方
面非常实用的工具是 leaverou.
github.io/contrast-ratio，因为它
接受所有合法的 CSS 颜色格式）

凸版印刷效果

在拟物化风格的网页中，凸版印刷效果是最流行的文字美化手法之一。
尽管现在拟物化的设计风格已经不像以前那样流行了，但它仍然拥有忠实的
追随者。

这种效果尤其适用于中等亮度背景配上深色文字的场景；但它也可用于
深色底、浅色字的场景，只要文字不是黑色并且背景不是纯黑或纯白就行。

132 第 5 章 字体排印

඀ࠡ JOEC