一句 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 内核的浏览器逼得多惨……
<p style="-webkit-text-stroke: 1px gray; color: white; font-size: 2em">
注意这个属性看上去类似此段所用的 text-shadow 属性,但仔细看 text-shadow 只能往外扩散阴影,而 text-stroke 可是同时往字体内部和外部填充的。
利用 text-stroke 这个特性,将描边的颜色设置成跟背景一样,就等于变相将字体变细了,比如当前你看到的可能是你见过最细的字体了!而此属性最棒莫过于用在 fontawesome 的图标上!
比如这个大家最爱最离不开的图标,原版是这样:
经过『细化』之后:
当然,镂空的图标,则是将描边的颜色设置成跟字体一样的颜色:
vs
此方法虽然不失为一种成本比较低的做法,现在也只能这么用,但毕竟比较 hack,会有一些副作用(比如填充颜色必须和背景色一致,但按理说跟背景色应该没关系,背景色一变还得记得跟着变,以及背景如果不是单色就不行了),还是期待 CSS 本身能早日支持这种效果。
原文地址:https://www.cnblogs.com/alantao/p/8890942.html