CSS字体效果应用场景
在前端开发过程中,我们可能会遇到页面需要特殊的字体效果的情况。字体的实现效果有多种方法,最常见的无异于两种:图片和CSS实现。
1.图片实现特殊字体
图片实现的字体效果肯定是最符合视觉效果的,不过这种方法的实现缺点也很多,比如资源消耗大,增加请求导致效率低下等等。不过最致命的还是:可塑性太差,一旦需要改动,则需要推倒重来。
2.CSS实现特殊字体
CSS实现字体效果,消耗资源小,可塑性高,不过缺点也有,比如负责的效果难以实现。不过总体来说,简单的特效字体用CSS实现还是比较可靠的,下面介绍几种常见字体的具体实现。
空心字
空心字,其实实现的就是字体描边效果,主要思路是利用text-shadow堆叠同一位置,取消模糊效果,实现描边的假象。
.box {
width: 100px;
height: 100px;
line-height: 100px;
background: pink;
color: #fff;
font-size: 24px;
text-align: center;
text-shadow:
0 0 1px #000, 0 0 1px #000,
0 0 1px #000, 0 0 1px #000,
0 0 1px #000, 0 0 1px #000;
}
这样就能做到简单的空心字效果了。不过这种实现的效果缺点也不少,描边越大,需要堆叠的次数也越多,资源消耗也会增加。
具体代码参见demo1。
发光字
发光字,需要实现字体边缘的发光特效。可以用text-shadow实现,为了特定效果可以多叠几层。缺点就是比较难以精确控制。
.box {
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
font-size: 24px;
color: pink;
text-shadow:
0 0 0.3em #f30, 0 0 0.3em #f30;
background: #000;
}
具体实现代码参见demo2。
立体字
立体字给人一种拟物风格,具有真实感,主要实现思路是用多层不同偏移量的阴影形成凹凸感。
.box {
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
font-size: 30px;
color: #fff;
background: #000;
text-shadow:
0 1px hsl(0,0%,85%),
0 2px hsl(0,0%,80%),
0 3px hsl(0,0%,75%),
0 4px hsl(0,0%,70%),
0 5px hsl(0,0%,65%),
0 5px 10px black;
}
text-shadow在y轴的偏移量会影响到字体的方向,如果偏移量为负值,就会得到上图2中的向上凸起的效果。
具体代码实现参见demo3。
以上就是关于CSS实现特殊字体的一些拙见。
Comments
注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。