矢量图标以及订制字体

web字体

如果我们在网页中需要使用特殊的字体,为了能让用户不需要下载特殊字体也能产生效果,我们需要对字体样式进行设置,当然有一些插件已经帮我们省去了这一过程,我们只需要知道怎么使用就可以

1.阿里字体

注意一点,下载后的是一个download文件,但实际是一个压缩包,将其解压即可获得文件和用法指示


    
    Document
    


    我们都是好孩子    

2.有字库

这个的官方文档中介绍的用法比较详细了,我们就不在赘述了

web图标

如果我们平时想要写一套风格相同的图标,我们可以使用字体图标

Font Awesome

用法的话官方提供了详细的文档,很简单,下面是一个使用的例子



    
    
    
    
    
    Document







更多的用法和常见问题参考官方文档

自定义图标

在我们工作时经常需要使用到精灵图,但是大量的载入图片会增加不必要的请求,如果在网速不好的情况下回大大影响用户体验,将图片转为字体图标可以很好的解决这个问题

IcoMoon

使用步骤


转化流程.png
转换流程_2.png

由于我们需要使用的是svg格式的图片,所以需要提前和设计人员沟通

自定义图标本身的使用方法也是比较简单的,在下载之后也会有demo,只要参考demo的写法就可以

使用的时候只要注意在文件生成后会有一个fonts文件夹,其中的文件是使用图标/字体的必须文件,注意同时放入项目中,如果和style.css不在同一级目录下记得更改style.css中的配置

你可能感兴趣的:(矢量图标以及订制字体)