icon-font与svg

icon font 使用与svg应用分享

icon font 字体概述

css3增长了@font-face属性，传统的浏览器是经过font-family来设置字体，若是系统里没有的话就用其它字体来代替。 
有了@font-face属性就方便多了，能够由开发人员经过设计自定义字体来进行的，加载过程是浏览器经过下载字体，再进行渲染页面 

 

font-face能够设置自定义自体，也能够设置自定义图片字体,font icon由此诞生。@font-face 引入生成好的字体文件 ，而后在网 
页中须要使用某个图标的地方，写上对应的“文字”，那么在浏览器中就能够看到图标。 
icon font 是国内第一家在线网络字体生成的工具网站，里面还有许多icon字体能够应用

 

Iconfont 使用起来很简单，打开它的首页，你会发现不少图标，点击你须要的图标，就会发现图标到了右上角的购物车里，选择好 
了图标以后，点击购物车，便可下载下来一个 zip 包。

解压以后，会出现：demo.html, iconfont.eot, iconfont.svg, iconfont.ttf, iconfont.woff 这几个文件。

其中 demo.html 文件是使用说明和效果，另外四个就是为兼容各个平台而转换生成的字体文件。你只须要打开 demo.html 文件 
就能够看到详细的使用说明。 
使用字体图标有不少好处，大致以下：

兼容性好，各个平台浏览器基本均可以使用，并且在某些低级浏览器中，效果比图片更好 
　相对于同效果的图片相比，体积小，减小 http 请求，增长前端性能 
　可维护性好，维护起来能够经过增减字体快速应用 
　交互性好，改变字体颜色便可改变图标的颜色，同时能够配合 CSS3 的动画、渐变、过渡、变形等属性实现 
　复杂的交互

然也有一些缺点，例如图标一般只有一种颜色，虽然渐变可使其颜色更加丰富，可是兼容性没了。还有一些其余的缺点，不过对于 
iconfont 这个工具来讲，最大的缺点就是图标太少。国外网站iconfont字体有 fontello 可使用。

PC端应用教程

font-face声明字体

　@font-face {
　
　font-family: 'iconfont';
　
 src: url('iconfont.eot'); /* IE9*/

 src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */

 url('iconfont.woff') format('woff'), /* chrome、firefox */

 url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/

 url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */

}

定义使用的iconfont样式

　.iconfont{
　  font-family:"iconfont";
　　font-size:16px;font-style:normal;
　　-webkit-font-smoothing: antialiased; 抗锯齿显示样式，safair或chrome
　　-moz-osx-font-smoothing: grayscale;
　　display: block; 若是出现小方块，在ie7下，则加这句话
　　-webkit-text-stroke-width: 0.2px; pc的chrome出现严重的锯齿
　　}

页面引用

<i class="iconfont">&#33</i>

应用注意事项：

只在你肯定你很是须要 @font-face的时候才使用他 
将你的@font-face定义在全部的SCRIPT标签前 
若是你有许多字体文件，考虑将它们分散到几个域名下。 
不要包含没有使用的 @font-face声明——IE将不分它使用与否，统统加载 
Gzip字体文件，同时给它们一个将来的过时头部声明 
考虑字体文件的后加载，起码对于IE。

参考网址 
参考网址

icon font制做

把制做好的AI图,另存为svg, 而后经过网址 上传, 点击加入购物车，而后在购物车中下载，会生成调用demo，进行对图片字段的调用。

以上是icon font 字体的使用，下面介绍svg的应用。

SVG的应用

SVG可缩放矢量图形（Scalable Vector Graphics）是基于可扩展标记语言（XML），用于描述二维矢量图形的一种图形格式。

特色

1．任意放缩。 
用户能够任意缩放图像显示，而不会破坏图像的清晰度、细节等。 
2．文本独立。 
SVG图像中的文字独立于图像，文字保留可编辑和可搜寻的状态。也不会再有字体的限制，用户系统即便没有安装某一字 体，也会看到和他们制做时彻底相同的画面。 
3．较小文件。 
整体来说，SVG文件比那些GIF和JPEG格式的文件要小不少，于是下载也很快。 
4．超强显示效果 
SVG图像在屏幕上老是边缘清晰，它的清晰度适合任何屏幕分辨率和打印分辨率。 
5．超级颜色控制。 
SVG图像提供一个1600万种颜色的调色板，支持ICC颜色描述文件标准、RGB、线X填充、渐变和蒙版。

使用内联SVG

SVG做为背景图片使用 
SVG做为src属性使用 
内联SVG

声明一个SVG元素

<svg xmlns="http://www.w3.org/2000/svg" width="400" height="300" viewBox="0 0 400 300">
 <!-- svg stuff here -->
</svg>

建立SVG图形

circle:基础图形，基于中心点以及半径来建立的圆形。

对于circle元素，咱们有3个须要指定的属性。它们是cx，cy，r。cx和cy是圆心在X轴和Y轴上的坐标，若是没有指定的话，它们的默认值为0。r为圆形的半径。通常来讲，对一个圆形元素来讲咱们能够看到以下的标签：

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">
 <circle cx="50" cy="50" r="50"></circle>
</svg>

rect:基础图形，基于角的位置和矩形的宽度和高度来建立的矩形。

矩形的建立跟圆形的建立方式差很少。就它最基础的形式来讲，咱们须要为其指定左上角的的坐标x和y，以及该矩形的宽度width和高度height的值。其标签以下所示：

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="100" viewBox="0 0 200 100">
 <rect x="0" y="0" width="200" height="100"></rect>
</svg>

polygon:基础图形，基于坐标点和两点相连而成的直线线段来建立的多边形。

咱们能够经过在points属性上的多组 x-y 坐标点来定义咱们的多边形元素。这些坐标点经过直线线段来链接。标签声明以下：

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 100">
 <polygon points="0,50 50,0 150,0 200,50 150,100 50,100"></polygon>
</svg>

path:万能的图形，能够用来建立任意的形状。全部基础图形都能由它来建立。

path元素是在形状处理方面最强大的元素。在path元素中，咱们能够定义d属性，这个属性为咱们的路径如何延伸做出了定义。d属性可让咱们经过一系列的命令来指定一个运动轨迹。咱们能够用直线命令和弯曲命令来构建一些复杂的形状。但实际上，你并不但愿手写贝塞尔曲线这种玩意，二是经过矢量软件来建立并输出SVG。但了解一下他们并非什么坏事。

M x y:移动到坐标x-y 
L x y:从当前位置画一条直线到坐标x—y 
H x:从当前位置画一条水平线到坐标x 
V y:从当前位置画一条垂直线到坐标y 
Z:闭合路径

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200">
 <path d="M 0 0 H 200 V 200 H 0 Z"></path>
</svg>

fill:元素的填充颜色 
fill-opacity:元素的填充颜色透明度 
stroke:元素的笔画颜色 
stroke-width:元素的笔画宽度 
stroke-opacity:元素的笔画颜色透明度

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200">
 <circle class="circle" cx="100" cy="100" r="90" fill="#3399cc" stroke="#333333" stroke-width="5"></circle>
</svg>

.circle {
 transition: stroke 0.3s, fill 0.3s;
}

.circle:hover {
 stroke: #3399cc;
 fill: #333333;
}

SVG中的结构化、分组和引用元素

使用元素分组

元素将其全部子内容分到一组。它一般有一个id属性，用来给分组命名。你给元素应用的样式也都会被应用于它全部的子元素。因此它很容易添加样式、动画、交互，甚至整个组的对象的动画。

使用重用元素

元素可让你重用现有的元素，给你一个相似于图形编辑器中复制粘贴的功能。它能够用于重用单个元素，也能够重用一组用定义的元素。

元素有x，y，height，width属性，它经过使用xlink:href属性引用其它内容。因此若是你已经定义了一个分组，并给它赋予了id，当你想要在其它地方使用它时，你只须要在xlink:href属性中给一个URI，而后指定x和y的位置，也就是该组图像显示的原点(0, 0)。

<use x="100" y="100" xlink:href="#bird" />
<use x="100" y="100" xlink:href="path/to/animals.svg#bird" />
<use xlink:href="#bird" transform="translate(100, 100)" />

使用重用已存储元素

元素能够用来存储那些咱们不想直接显示的内容。换句话说，元素就是用来定义元件，可是不直接渲染。这个隐藏的存储元件能够在后面被其它SVG元素应用及显示，这使得它很是适合用于绘制那些包含重用图像的图案。

<svg>
<defs>
 <linearGradient id="gradient">
 <stop offset="0%" style="stop-color: deepPink"></stop>
 <stop offset="100%" style="stop-color: #009966"></stop>
 </linearGradient>
</defs>

<rect stroke="#eee" stroke-width="5" fill="url(#gradient)"></rect>

 

使用对元素进行分组

很是适用于定义可重复使用的元件（或符号）。它也能够做为元素实例化的一个模板。并且有viewBox和preserveAspectRatio属性，它能够在引用元素定义的矩形视窗中自适应缩放。注意symbol元素每次被use元素实例化时均可以从新定义新的视窗。

SVG SMIL animation

如今这个功能正在逐步被移除，最好不要使用，它是在svg里直接加入动画元素，如今作的时候都用css3书写对元素的操做。 
主要内容有

<set>
<animate>
<animateColor>
<animateTransform>
<animateMotion>`

正确的写法举例
 #mouthTwo{
 animation:domouth 1s linear infinite;
 -webkit-animation: domouth 1s linear infinite;
 }
 @-webkit-keyframes domouth {
 from {
 opacity: 0;
 }

 50% {
 opacity: 1;
 }
 }
 @keyframes domouth {
 from {
 opacity: 0;
 }

 50% {
 opacity: 1;
 }
 }

 之前的写法
 <animate attributeName="opacity" from="1" to="0" begin="0s" dur="3s" repeatCount="indefinite" />

参考文档 
snap.svg.js 制做svg动画 
svg教程视频

以上仅供参考