CSS 让 fontawesome 图标字体变细

一句 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

时间: 2024-10-17 11:21:14

CSS 让 fontawesome 图标字体变细的相关文章

学习WPF——使用Font-Awesome图标字体

图标字体介绍 在介绍图标字体之前,不得不介绍图标格式ICON ICON是一种图标格式,我们操作系统中各种应用程序都包含一个图标 比如QQ程序的图标是一个可爱的企鹅,我的电脑是一个显示器图标 ---------------- 一个图标文件是扩展名为.ICO或者ICON的文件 直到现在图标文件还是在计算机程序中随处可见 但有时候需要在不失真的情况下放大图标 因为ICON本身与JPEG\PNG格式的图形文件差异不大,也是非矢量图形 所以图标文件就很难满足这种需求 ---------------- 为了

bootstrap图标字体不出来问题的解决办法

@font-face { font-family: 'Glyphicons Halflings'; src: url('/Scripts/bootstrap/fonts/glyphicons-halflings-regular.eot'); src: url('/Scripts/bootstrap/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('/Scripts/bootstrap

直接在 CSS 中引用 FONTAWESOME 图标(附码表)

直接在 CSS 中引用 FONTAWESOME 图标(附码表) 因此我们如果不想用 Fontawesome 提供的类,只想在 css 里面引用图标的话,可以这样子,请自行脑补: .icon:before { content: '\f006'; font-family: FontAwesome; } 同时附上图标类对应的字符编码表: NAME CODE NAME CODE .fa-glass \f000 .fa-github-alt \f113 .fa-music \f001 .fa-folder

【css】最近使用的两种图标字体库

## 0. 前言 比较基础的图标加载:<img src="x.png">和块元素的背景background: url(./x.png). 页面多图标时,使用雪碧图(多个png压缩成一个png,定位来使用),减少图片所占空间. 大屏显示,为保证图标清晰度,可以使用svg格式的图片.svg是矢量图,直接更改svg代码中path的fill改变颜色. 可自编辑开源svg库 [http://www.iconfont.cn/home/index](http://www.iconfont

Font Awesome 是一套绝佳的图标字体库和CSS框架

Font Awesome 是一套绝佳的图标字体库和CSS框架.http:/ /ww w.i is7.co m/b/slj/Font Awesome 字体为您提供可缩放矢量图标,它可以被定制大小.颜色.阴影以及任何可以用CSS的样式.要使用Font Awesome图标,请在HTML页面的 部分中添加以下行:国内 CDN:<link rel="stylesheet" href="https:/ /cdn.bootcss.com/font-awesome/4.7.0/css/

Font Awesome奥森图标一套绝佳的图标字体库和CSS框架

迄今最完好的翻译版本-一套绝佳的图标字体库和CSS框架(奥森图标) Font Awesome 逐浪CMS官方版正式开放啦! 免费获取和使用就在:http://code.zoomla.cn/boot/font.html(非广告官方翻译版本,希望对广大开发者有用). 逐浪CMS已经完全支持Font Awesome奥森图标! Font Awesome为您提供可缩放的矢量图标,您可以使用CSS所提供的所有特性对它们进行更改,包括:大小.颜色.阴影或者其它任何支持的效果. 一个字库,479个图标 仅一个F

CSS高级技巧 图标字体ICONFONT的使用方法视频

图标字体  iconfont 这是一种字体,它跟svg 有很大 相似点   它是矢量的,放大缩小不失真的.很且很小. 我们把它成字看来. 字体 在 从ie4就开始支持的.  兼容性很好 唯一麻烦的地方,就是制作麻烦. 越来越的网站开始运用这个图标字体. 一些地方,我们就不用精灵图片,直接用图标字体. 图标字体的使用 自己制作比较麻烦,我们一般是网上直接下载,因此,要使用iconfont字体一共分为三步: 1. 先从网上下载字体.     经常使用的两个网站: icomoon.io http://

css的伪元素 ::after ::before 和 图标字体的使用

css中的::after和::before已经被大量地使用在我们日常开发中了,使用他们可以使我们的文档结构更加简洁.但是很多人对::after和::before仍不是特别了解,究竟他们是做什么的?如何使用他们?什么时候应该使用他们?笔者总结了一些对伪元素的理解和使用经验. 一.概念: 1.定义 The CSS ::before(::after) pseudo-element matches a virtual first(last) child of the selected element.

extjs基础 使用图标字体来美化按钮)

下载 Font Awesome 1.拷贝css 和 fonts 到build同级目录 2.需要在index.html中引入css文件 3.在main.js文件中添加 1 initComponent : function() { 2 Ext.setGlyphFontFamily('FontAwesome'); // 设置图标字体文件,只有设置了以后才能用glyph属性 3 this.callParent(); 4 }, 4.在组件中使用 text: '主页', glyph: 0xf015   //