11月22, 2016

CSS学习笔记(3) - 字体效果

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;
}

pic

这样就能做到简单的空心字效果了。不过这种实现的效果缺点也不少,描边越大,需要堆叠的次数也越多,资源消耗也会增加。

具体代码参见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;
}

pic

具体实现代码参见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;
}

pic

text-shadow在y轴的偏移量会影响到字体的方向,如果偏移量为负值,就会得到上图2中的向上凸起的效果。

具体代码实现参见demo3

以上就是关于CSS实现特殊字体的一些拙见。

本文链接:https://excaliburhan.com/post/css-text.html

-- EOF --

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。