zoukankan      html  css  js  c++  java
  • 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 本身能早日支持这种效果。

  • 相关阅读:
    获取txt文件的内容
    MAT(Memory Analyzer Tool)下载和安装
    转换流:指定编码 读取文本文件InputStreamReader和写出文本文件OutputStreamWriter 字符集
    切入点表达式
    并发时事务引发的问题和事务的隔离级别
    多线程之join方法
    多线程之守护线程
    约束:主键、非空、唯一、外键
    数据库设计
    PLSQL过期解决办法
  • 原文地址:https://www.cnblogs.com/alantao/p/8890942.html
Copyright © 2011-2022 走看看