Tag : css
Tag : css
通过软件自动生成sprite图,并且生成css
下载地址如下:
http://www.99css.com/archives/1524
Categories: Html5/CSS3, 前端开发
适用性:一个图标字体比一系列的图像要小。一旦图标字体加载了,你的图标就会马上渲染出来,不需要下载一个图像。
可扩展性:图标字体可以用font-size属性设置其任何大小。
灵活性:文字效果可以很容易地应用到你的图标上,包括颜色,阴影和翻转等效果。
兼容性:网页字体支持所有现代浏览器(包括IE6)。
原理:背景图片定位对比@font-face
兼容性:完美对比完美
图标颜色:丰富对比单一
缩放:失真对比高清
后期维护:困难对比简单
使用率:高对比一路看涨
在https://icomoon.io/上的webapp有fonts下载
里面包括字体文件有:
EOT:Embedded OpenType Fonts(EOT)微软开发的用于嵌入网页中的字体,IE专用字体.
WOFF:The Web Open Font Format(WOFF)Web字体中最佳格式,他是一个开放的TrueType/OpenType的压缩版本.2009年被开发,如今被W3C组织推荐标准
TTF:True Type Fonts(TTF)1980s,由Microsoft和Apple联合开发的一套字体标准,是Mac OS和WIN操作系统中最常见的一种字体.
SVG:SVG Fonts(SVG)用于SVG字体渲染的一种格式,它是由W3C制定的开放标准的图形格式.
版本兼容:
IE Chrome firefox safari opera
EOT : 6.0 no no no no
WOFF: 9.0 5.0 3.6 5.1 11.1
TTF : 9.0* 4.0 3.5 3.1 10.0
SVG : no 4.0 no 3.2 9.0
然后设置css中的@font-face
@font-face{ font_family:<family-name>; src:[<url>[format(<string>#)]?|<font-face-name>]#; font-weight:<weight>; font-style:<style>; } @font-face{ font-family:”name”; src:url(“../name.eot”); /*IE9 兼容模式*/ src:url(“../name.eot?#iefix”) format(“embedded-opentype”) ,url(“../name.woff”) format(“woff”) ,url(“../name.ttf”) format(“truetype”) ,url(“../name.svg”) format(“svg”); font-weight:normal; font-style:normal; } .name{ font-family:”name”; font-style:normal; font-weight:normal; font-style:64px; -webkit-font-smoothing:antialiased; /*webkit抗锯齿*/ -moz-osx-font-smoothing:grayscale;/*火狐,mac抗锯齿*/ } 字体使用 在html内使用字体: "&#x"添加在font16前 <i class="name">ont16</i> 用class使用字体: .icon-a:before{ content:"\font16" } <i class="name icon-a"></i> |
Categories: 前端开发