一句 CSS 让 fontawesome 图标字体变细

自从 iOS 某个版本发布之后,前端的流行趋势是什么都越来越细…字体越来越细…图标线条也越来越细。而很久之前就以发布的 fontawesome 很显然已经跟不上流行的趋势了,不过在现代的浏览器里,倒是可以让 fontawesome 改头换面,重获青春。

在 CSS3 里,有一个叫做 text-stroke 的属性,它的作用听上去很无用,就是在字体的边缘处描上细线,就如你当前看到的这段话一样,有点 80 年代美国广告常用的字体效果的赶脚……

查看上段落的 CSS 代码,即可了解 -webkit-text-stroke 用法。注意虽然有 -webkit- 前缀,但目前 IE 和 Firefox 也开始支持部分带 -webkit- 前缀的属性了…… 这是被 chrome 和 safari 这些 webkit 内核的浏览器逼得多惨……

注意这个属性看上去类似此段所用的 text-shadow 属性,但仔细看 text-shadow 只能往外扩散阴影,而 text-stroke 可是同时往字体内部和外部填充的。

利用 text-stroke 这个特性,将描边的颜色设置成跟背景一样,就等于变相将字体变细了,比如当前你看到的可能是你见过最细的字体了!而此属性最棒莫过于用在 fontawesome 的图标上!

比如这个大家最爱最离不开的图标,原版是这样:

经过『细化』之后:

当然,镂空的图标,则是将描边的颜色设置成跟字体一样的颜色:

vs

此方法虽然不失为一种成本比较低的做法,现在也只能这么用,但毕竟比较 hack,会有一些副作用(比如填充颜色必须和背景色一致,但按理说跟背景色应该没关系,背景色一变还得记得跟着变,以及背景如果不是单色就不行了),还是期待 CSS 本身能早日支持这种效果。

提示:使用火狐或 Chrome 等亲近程序员的浏览器右键点击图标或者字体,选择『查看元素』可看代码,以上效果都真是 CSS 做出来的不是效果图……

wx pay

CC BY-NC-ND 4.0 一句 CSS 让 fontawesome 图标字体变细 by Chrisyue's Blog is licensed under a Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License.

发表评论

电子邮件地址不会被公开。

+ forty three = fifty one