svg取代传统png/jpg图片格式

在线 svg 图标文字图片文字图标字体图片字体图标字体符号

在制作网站的时候，绘制一些图标或者图案的时候，往往都会想到要使用图片来代替，或者将图片拼接在一起在使用CSS定位来找到。其实随着技术的进步已经是使用svg来取代传统png/jpg图片格式。

svg可以用css来修改就像设置font字体一样简单快捷。

这里介绍一个国外强大的在线生成svg网站，可以自定义自己需要的svg并且还帮我们生成了eot，woff，ttf，svg全面的字体格式。你也可以自己制作一个svg格式的文件上传并选中时下载得到的字体文件也会帮我们的svg合并到里面，很强大。

https://icomoon.io/app/

国内：http://iconfont.cn/

制作svg教程：http://iconfont.cn/help/platform.html

简单了解下浏览器支持和兼容的字体格式

字体文件格式

浏览器对字体支持情况

对于字体的加载必须要使用@font-face属性

这里简单说明下使用方法，当我们下载到压缩包时候我们只需要fonts文件夹。

具体使用要先加载font字体格式：

@font-face{
  font-family: 'icomoon';
  src:url('fonts/icomoon.eot');
  src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),
  url('fonts/icomoon.woff?jq8oyj') format('woff'),
  url('fonts/icomoon.ttf?jq8oyj') format('truetype'),
  url('fonts/icomoon.svg?jq8oyj#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

然后在我们需要存放字体的标签出设置css如下：

div{ width:140px; height:138px; border:1px solid red; display:block;
    font-family: 'icomoon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    font-size: 24px;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }

html：（下载到的压缩包都会有demo.html部分里面提供的数字前面，数字对应图片需要&#x+数字）

<div class="ico">&#xe600;</div>

简单的在本地做个测试可以完美兼容万恶的IE6。

如果不考虑IE6/7，可以使用:before :after content:”” 添加小图标这样能保证代码的简洁。例如：

.ico:before{
  content:"\e600";
}
.ico:hover{
  content:"\e600";
  color:red;
}

这样就没有必要在html中在去添加

&#xe600;

https://sdeno.com/zp/icomoon/demo.html

https://sdeno.com/zp/icomoon/index.html