作者 这篇文章来自 Laurent Jouanneau，他很乐意构建一个非常简单但优雅的演示，展示如何在 Firefox 3.5 中使用网页字体和一些新的 CSS 特性。
阴影和圆角
首先，我们在工具栏上设置一些样式属性
-moz-border-radius:10px 0px 10px 0px;
这表示左上角和右下角的边框应为圆角，半径为 10 像素。
-moz-box-shadow: #9BD1DE 5px 5px 6px;
这表示应在 div 下方绘制阴影，向右和下方偏移 5 像素，模糊半径为 6 像素。
其次，按钮。我们仍然使用 border-radius 属性。但我们也使用了 box-shadow 属性，它会根据按钮的状态而改变。在正常状态下，按钮外部有一个阴影。当鼠标悬停在其上（悬停状态）时，阴影会更改为使用 inset CSS 属性位于按钮内部。当我们点击按钮（激活状态）时，我们也执行相同的操作，但我们也会使阴影更大更暗。
#superbox button {
-moz-border-radius: 5px;
-moz-box-shadow: #000 0px 0px 8px;
}
#superbox button:hover {
-moz-box-shadow: inset #989896 0 0 3px;
text-shadow: red 0px 0px 8px;
}
#superbox button:active {
-moz-box-shadow: inset #1C1C1C 0 0 5px;
}
您还可以看到，当鼠标悬停在按钮文本上时，我们使用 text-shadow 属性在文本下方添加了一个红色阴影。
网页字体
每个按钮都使用其自己的字体进行渲染，该字体使用 @font-face 声明。示例
@font-face {
font-family: Brock Script;
src: url("BrockScript.ttf");
font-style: normal;
font-weight: normal;
}
使用 font-family 属性，我们为字体指定一个名称。src 指示可下载字体的 URL。
定义 @font-face 属性后，我们可以在 CSS 中将其用于其中一个按钮
.first {
font-family: Brock Script;
}
当您使用 @font-face 声明字体，然后在 CSS 中使用该字体时，浏览器会自动下载并使用该字体进行渲染。浏览器不会下载您不使用的字体，因此可以安全地从一个通用的 CSS 文件中包含字体描述，这些字体可能不会在您当前显示的页面中使用。
在演示中，每个按钮还连接了一小段脚本，它会更改蓝色框的类以使用该按钮的下载字体，这表明您也可以动态更新字体。
通过这些相对简单的技术，我们可以拥有漂亮的按钮，而无需使用位图图像。
注意：这些字体可以从 fontsquirrel.com 下载：Brock-Script（由 Dieter Steffmann 创建）、Sniglet（由可移动类型联盟创建，根据 CC-by-sa 许可证）和 Quick End Jerk（由 Vic Fieger 创建）。
关于 Christopher Blizzard
一次发布，让网络更美好。
22 条评论