css - 更改 FontAwesome 图标的字体粗细？

Question

我想让其中一个 FontAwesome 图标稍微轻一点——它比我使用的字体重得多。这是它目前的样子:

:

丑吧？所以我尝试按如下方式重置字体粗细:

.tag .icon-remove  { 
  font-weight: 100;
}

该属性似乎在 CSS 中设置正确，但没有任何效果 - 图标看起来和以前一样重。我也试过 font-weight: lighter 和 -webkit-text-stroke-width: 1px 没有效果。

有什么办法可以减轻图标的重量吗？文档说“Anything you can do with CSS font styles, you can do with Font Awesome”，但我不知道该怎么做。

Answer 1

Webkit 浏览器支持向字体添加“描边”的功能。这种风格使字体看起来更细(假设是白色背景):

-webkit-text-stroke: 2px white;

Codepen 示例:http://codepen.io/mackdoyle/pen/yrgEH 有些人将 SVG 用于跨平台“描边”解决方案:http://codepen.io/CrocoDillon/pen/dGIsK