CSS makes Fontawesome icon font thinner

A CSS makes Fontawesome icon font thinner

Since the release of a version of IOS, the trend of the front end is becoming more and more fine ... The font is getting thinner ... The lines of the icons are getting thinner. And the old thing Fontawesome Stout line style is obviously already keep up with the trend of fashion, but in modern browser, there is a way to let Fontawesome makeover, regain youth.

2018-04-12 add: Long time no visit Fontawesome's official website, now incredibly also out of solid/regular/light (may be you want the fine version) three kinds of version! If you do not feel thin enough after you have visited the light version, please continue reading.

In the CSS3, there is a property called Text-stroke, its role sounds useless, is the edge of the font line, as you see this paragraph, a bit of the 80 's American advertising commonly used font effect of the bright ...

See the CSS code for the previous paragraph to learn-webkit-text-stroke usage. Note Although there is-webkit-prefix, but now IE and Firefox also began to support some of the attributes with-webkit-prefix ... This is how much the browser of Chrome and Safari these WebKit kernels are forcing ...

<p style= "-webkit-text-stroke:1px Gray; Color:white; Font-size:2em ">

　　

Note that this property looks similar to the Text-shadow attribute used in this paragraph, but looking closely at the Text-shadow can only diffuse shadows outward, while Text-stroke fills both inside and outside the font.

Using the Text-stroke feature, the color of the stroke is set to be the same as the background, which is tantamount to making the font thinner in disguise, such as what you see is probably the finest font you've ever seen! The best thing about this property is to use the Fontawesome icon!

For example, this is the most inseparable from the most popular icon, the original is this:

After "refinement":

Of course, the cutout icon is the color of the stroke that is set to the same color as the font:

Vs

Although this method is a cost-less approach, now can only be used, but after all, there will be some side effects (such as the hack color must be consistent with the background color, but it should be no matter what is supposed to be, the back color changes also have to remember to change, and the background if not monochrome), or look forward to CSS itself can support this effect early.

CSS makes Fontawesome icon font thinner