html字体由粗变细的方法,CSS 让 fontawesome 图标字体变细(示例代码)

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

2018-04-12 补充：好久没有访问 fontawesome 的官网，现在居然也出 solid / regular / light(可能就是你们想要的细版)三种版本了！如果你放在访问了 light 版之后觉得还不够细，请继续阅读。

在 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 本身能早日支持这种效果。