汉字探究_探究：Google Web字体效果

最新推荐文章于 2024-09-25 10:17:48 发布

cune1359

最新推荐文章于 2024-09-25 10:17:48 发布

阅读量178

点赞数

文章标签： css css3 java html 小程序 ViewUI

多年来，我们主要根据字体的大小或颜色设置样式，直到最近才可以使用CSS3添加文本阴影。有时候我们需要更多的样式来获取更多令人惊艳的字体，但是我们自己创建它会非常复杂。用图像替换它仍然不是一个好的选择。

这是个好消息。 Google Webfont引入了一项功能，使我们可以轻松应用装饰字体样式。目前，我们可以应用超过25种字体效果 。

要添加效果，我们在Google Web字体样式表中插入effect=参数，后跟字体效果API名称。在下面的示例中，我们添加了“ Multiple Shadow”字体效果，该效果由shadow-multiple （API名称）指定。

<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed&effect=shadow-multiple' rel='stylesheet' type='text/css'>

然后，我们只需添加类名称即可将效果应用于字体。类名称由font-effect-*和API名称指定。给定以上示例，“多重阴影”效果的类名称将为font-effect-shadow-multiple 。

<p class="font-effect-shadow-multiple">This is Awesome!</p>

这就是“多重阴影”字体效果的外观。

如果您想知道如何实现此效果，可以检查样式表，该样式表将向您显示以下样式规则。

.font-effect-shadow-multiple {
	text-shadow: .04em .04em 0 #fff,.08em .08em 0 #aaa;
	-webkit-text-shadow: .04em .04em 0 #fff, .08em .08em 0 #aaa;
}

多重阴影效果是通过CSS3 text-shadow属性实现的，因此该效果仅在Chrome，Firefox，Opera和Safari中显示。 Internet Explorer 9（和更早版本）不支持text-shadow属性，但是它具有自己的规则以使用Shadow Filter定义阴影。

我们被允许在样式表中添加多种效果。在此示例中，我们一次添加了三种字体效果：多重阴影，浮雕，3D。每个效果都用管道符号分开| ，如下。

<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed&effect=shadow-multiple|emboss|3d' rel='stylesheet' type='text/css'>

这是Emboss字体效果的外观。

下面是我们刚刚添加的3D效果。

值得注意的是，我们无法将多个效果添加到单个元素中，因为效果样式规则将相互覆盖。此外，您可以转到演示页面以查看这些效果。