矢量图标以及订制字体
2018-02-21 本文已影响0人
羊烊羴
web字体
如果我们在网页中需要使用特殊的字体，为了能让用户不需要下载特殊字体也能产生效果，我们需要对字体样式进行设置，当然有一些插件已经帮我们省去了这一过程，我们只需要知道怎么使用就可以
1.阿里字体
注意一点，下载后的是一个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图标
如果我们平时想要写一套风格相同的图标，我们可以使用字体图标
用法的话官方提供了详细的文档，很简单，下面是一个使用的例子
<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>
更多的用法和常见问题参考官方文档
自定义图标
在我们工作时经常需要使用到精灵图，但是大量的载入图片会增加不必要的请求，如果在网速不好的情况下回大大影响用户体验，将图片转为字体图标可以很好的解决这个问题
使用步骤
转化流程.png
转换流程_2.png
由于我们需要使用的是svg格式的图片，所以需要提前和设计人员沟通
自定义图标本身的使用方法也是比较简单的，在下载之后也会有demo，只要参考demo的写法就可以
使用的时候只要注意在文件生成后会有一个fonts文件夹，其中的文件是使用图标/字体的必须文件，注意同时放入项目中，如果和style.css不在同一级目录下记得更改style.css中的配置
