矢量图标以及订制字体

web字体

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

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        @font-face {
        /*需要注意的是引用地址要更改成我们自己解压后的地址 */  
        font-family: 'webfont';/*字体的样式名称*/
        src: url('../webont/webfont.eot'); /* IE9*/
        src: url('../webont/webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('../webont/webfont.woff') format('woff'), /* chrome、firefox */
        url('../webont/webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
        url('../webont/webfont.svg#webfont') format('svg'); /* iOS 4.1- */
        }
        .web-font{     /* 设置引用字体的属性*/
        font-family:"webfont" !important;     /* 设定引用字体*/
        font-size:50px;font-style:normal;     /* 设置字体大小和样式*/
        -webkit-font-smoothing: antialiased;
        -webkit-text-stroke-width: 0.5px;     /* 设置字体的笔画粗细*/
        -moz-osx-font-smoothing: grayscale;
        }
    </style>
</head>
<body>
    <i class="web-font">我们都是好孩子</i>    <!--引用字体-->
</body>

2.有字库

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

web图标

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

Font Awesome

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

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./font-awesome-4.7.0/css/font-awesome.css">
    <!--引入下载的font-awesome样式文件-->
    <title>Document</title>
</head>
<body>
<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
<i class="fa fa-address-book"></i>
<!--添加公共类fa 以及每个图标单独的样式名-->
</body>
</html>

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

自定义图标

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

IcoMoon

使用步骤

转化流程.png

转换流程_2.png

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

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

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

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

矢量图标以及订制字体