颠覆网络35天 ─ 简单演示网络字体和CSS特性

原文地址：web fonts and css features - a simple demonstration
系列地址：颠覆网络35天

====================================

本文作者为Laurent Jouanneau，他为我们带来的一个非常简单但是非常美妙的演示如何使用Firefox 3.5中的网络字体和一些全新的CSS特性。

在Firefox 3.5中查看演示
font_shadow_radius

阴影和圆角

首先，我们来看一下整个工具条div的风格属性：
-moz-border-radius


-moz-border-radius:10px 0px 10px 0px;

这条语句表示左上角和右下角都有半径为10像素的圆角。

-moz-box-shadow


-moz-box-shadow: #9BD1DE 5px 5px 6px;

这条语句表示在div下方渲染阴影，向右下方向位移5个像素，并使用6个像素大的模糊半径。

然后，让我们看看按钮。我们同样使用border-radius属性。但是我们还使用盒子阴影属性这样可以根据按钮的状态发生变化。在正常状态下，阴影在按钮外面。当鼠标悬停在按钮上（hover状态），阴影通过使用inset的CSS属性变为在按钮里面。在点击按钮时（active状态），我们也使用同样的效果，但是我们会将按钮的阴影做得更大更深。


#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属性表示可下载字体的链接位置。

当我们定义好@font-face属性之后，就可以为我们的按钮添加相应的CSS属性了：


.first {
    font-family: Brock Script;
}

当你使用@font-face定义字体然后在CSS中使用时，浏览器会自动的下载字体并使用该字体来渲染文字。

在演示中还有一些脚本用来处理按钮的操作和效果，例如更新整体蓝色盒子使用的字体等等。

使用这些非常简单的技术，我们就可以制作出非常漂亮的按钮，而不需要在使用类似于位图之类的技术了。

请注意：这些字体可以从fontsquirrel.com下载到──Brock-Script（由Dieter Steffmann制作），Sniglet（由The League of Moveable Type制作，使用CC-by-sa协议发布）和Quick End Jerk（由Vic Fieger制作）。

Post a comment | Trackback URI