QQ爹の博客 QQ爹の博客

网站字体图标,我的一次次改进!

in 人性思考 文章转载请注明来源!

直接引用fontawesome

引用fontawesome,就可以直接使用六七百个图标,这么多图标总有合适自己心意的,
优点:方法简单,图标全面,
缺点:文件有些大。

精简图标

因为制作yodu模板时,本着精简的想法,所以就考虑了只引用自己需要的图标,于是找到了icomoon.io,开始精简fontawesome字体图标,当时只保留了40多个图标,感觉很清爽。
优点:体积小,达到了吃多少乘多少饭的理念
缺点:缺点也很明显,需要用些经历去挑选自己所需要的图标,耗费时间。

精简图标后遗症

随着yodu模板的贩卖,问题来了,用户需要这样那样的图标,而我精简的那些里,并没有他需要的图标,然后我再次增加图标;这个过程循环了几次;现在模板加载的图标数量达到了55左右,基本常用的图标应该算是齐全了。

字体文件跨域问题

因为模板支持将模板文件放到七牛云等云平台后,字体图标这里出现了问题,跨域问题;网上搜的大多数方法都是针对服务器调整的,而用户只会觉得是我模板的问题,于是又在网上搜了几个小时,看到了很不起眼的一句话,转为base64编码。

base64编码字体的使用

怎么转换成base64编码字体呢,其实,上文提到精简字体的网站icomoon.io它就可以,然后我试着去弄时,发现了个尴尬的问题,该功能只对收费用户解锁。
于是再次找起来免费的平台,苍天不负有心人,终于在lccky博客找到了
http://www.motobit.com/util/base64-decoder-encoder.asp 这个网址,上传字体就能直接生成base64编码

lccky说的一样,生成的代码里有迷之空格,于是找打了个在线去除空格的网站http://www.5ixuexiwang.com/str/compress.php
至此得到了我们需要的东西

优点:体积很小,有针对性的字体,文字越少,体积越小;可以美化网页文字、增强界面效果,不需要图片来代替,也就减少了http请求;base64编码直接放进了样式表,这样不需要额外的http请求;支持主流浏览器,即使不支持也可以优雅降级;
缺点:在精简字体的缺点上有麻烦了两步,古老浏览器不兼容(虽说我模板也不兼容古老浏览器)

jrotty WeChat Pay

微信打赏

jrotty Alipay

支付宝打赏

文章二维码

扫描二维码,在手机上阅读!

模板字体图标
发表新评论
已有 21 条评论
  1. 疯狂减肥带
    疯狂减肥带Windows 10谷歌浏览器
    回复

    ...为什么不试试alifont呢? 自由添加

    1. Jrotty
      Jrotty本文作者Android N神马浏览器
      回复

      @疯狂减肥带 忘了什么原因了,可能没想到阿里也有fontawesome的字体吧

  2. 懒成狗的樱花
    懒成狗的樱花Windows 10谷歌浏览器
    回复

    背景图更换后有的蓝色的a标签就撞色了很难受,而且背景图有的地方是白的,跟白字也撞色了,读起来很难受

    1. Jrotty
      Jrotty本文作者Android N神马浏览器
      回复

      @懒成狗的樱花 大屏幕下吧,今天就去网吧调试调试

  3. LiarOnce
    LiarOnceiPhone OSSafari浏览器
    回复

    其实我记得有一段PHP代码可以解决跨域问题。

  4. Waxxh
    WaxxhWindows 7谷歌浏览器
    回复

  5. 王忘杰
    王忘杰Windows 10谷歌浏览器
    回复

    最好的设计就是没有设计 --胡说八道

  6. 远哥制造
    远哥制造Windows 10谷歌浏览器
    回复

    可怕的封面

    1. Jrotty
      Jrotty本文作者Android N神马浏览器
      回复

      @远哥制造 随机封面就是那么叼

      1. 远哥制造
        远哥制造Windows 10谷歌浏览器
        回复

        @Jrotty 原来是随机的啊,666

        1. Jrotty
          Jrotty本文作者Windows 10谷歌浏览器
          回复

          @远哥制造 因为文章里没有图片引入哈,所以随机个占位

PREVIOUS NEXT
雷姆
拉姆
音乐加载中...
0:00