本文由逐浪官方发布于2015年6月11日，最后更新时间：2019年8月16日
一共24款字体，分别对应：
逐浪经典粗黑体 zFont1
逐浪时尚钢笔体 zFont2
伟人毛体 ZoomlaXingtiJ6
逐浪新宋超细体 ZoomlaXSongExtraLight
逐浪重圆体 ZoomlaChongyuan-A006
逐浪创意流珠体 Zoomlaliuzhu-A007
逐浪日系楷体 ZoomlaRixi-A013
逐浪哥特真爱体 ZoomlaGetelove-A014
逐浪圆体 ZoomlaYuan-A016
逐浪创意婉约体 ZoomlaWuanYue-A017
逐浪丫玉体 ZoomlaYayu-A019
逐浪小雪钢笔体 Zoomlaxiaoxue-A020
逐浪硬行体 ZoomlaYingXing-A024
逐浪湘教钢笔体 ZoomlaXiangJiao-A025
逐浪小霞硬楷体 ZoomlaXiaoxia-A027
逐浪帅宋斜楷体 ZoomlaShuaisong-A028
逐浪投影透视黑体 ZoomlaTouyinghei-A032
逐浪线楷彩色字 ZoomlaCaise-A040
逐浪文宣剪纸体 ZoomlaWenxuan-A043
逐浪新隶体 ZoomlaJianmingLi-A047
逐浪盖世英雄狂草体 ZoomlaGaiShiHero-A050
逐浪像素字 ZoomlaXiangsu-A051
逐浪报人书法行体 Zoomlabaoren-A102
逐浪金农书法体 ZoomlaJinnong-A106
*注：所有字库支持SSL读取（即以https:// 方式引用）。
示例：逐浪盖世英雄狂草体webfont引用：
@font-face{font-family:'ZoomlaGaiShiHero-A050';/*逐浪盖世英雄狂草体*/
src: url('font/ZoomlaGaiShiHero-A050.eot?#iefix'); /* IE9 */
src: url('font/ZoomlaGaiShiHero-A050.eot?#iefix') format("embedded-opentype"), /* IE6-IE8 */
url('font/ZoomlaGaiShiHero-A050.woff') format("woff"), /* chrome、firefox */
url('font/ZoomlaGaiShiHero-A050.ttf') format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */
url('font/ZoomlaGaiShiHero-A050.svg#ZoomlaGaiShiHero-A050') format("svg"); /* iOS 4.1- */
font-style: normal; font-weight: normal;}
.Youcss{font-family:"ZoomlaGaiShiHero-A050";}字体效果：
配合zico图标使用，则效果更好：
提示：在word或wordpad中输入四位UNI码，按ALT+X可以输出相关字形，也可以直接拷上面字形。
欢迎使用逐浪云字库，官方网址：
www.ziti163.com/webfont
zico项目地址：ico.z01.com
附：
最近在做一个项目时, 研究了一下新浪微博的前端, 看到首页中那个图标了吗, 以前看到这类效果的第一反应就是用一个gif之类的图标做出来!!
但在研究的过程, 发现了一个小技巧, 注意那个em标签中的文本是E, 但显示出来一个类似ICON的图标.
既然是HTML+CSS写出来的, 那么应该是由css控制显示出来的效果的.
其他的一些css基本没什么问题, 都理解了, 但只有这个 font-family, 强制设置成了 "wbficonregular", 一般操作系统里应该没这个命名的字体吧!!
又乱点了一下谷歌的调试器, 发现有加载字体文件的!! 而且在其中一个字体文件中, 发现和首页图标一样形状的东西!!
百度一下, woff是一种字体文件!!
于是我就想 应该也有软件可以制作自己的字体文件吧. 百度一下, 找到了名为 FontCreator 的软件!!
文件 -> 新建
字符集 , 字体样式 和 预定义轮廓我都按默认值弄, 其中预定义轮廓 选 包括轮廓, 是让新建的字体文件默认就有几个字符的了, 一般我都直接修改就行了!!
例如我把 数字字符0 修改一下 在数字字符0 上右键-> 编辑
在出现的窗口, 点0的正中间 就可以拖动选框, 修改它的形状 (只为做实例)
=>
好了, 保存!!
接下来, 把刚刚做的字体用到html编写中去!!
只是做个实例, 还是把css写到html中吧
谷歌浏览器的效果
这个时候不要想完工了, 用万恶的IE打开看看
效果出不来?? 百度一下css自定义字体的兼容问题
来源 http://www.w3cplus.com/content/css3-font-face
一、TureTpe(.ttf)格式：
.ttf字体是Windows和Mac的最常见的字体，是一种RAW格式，因此他不为网站优化,支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+】；
二、OpenType(.otf)格式：
.otf字体被认为是一种原始的字体格式，其内置在TureType的基础上，所以也提供了更多的功能,支持这种字体的浏览器有【Firefox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,iOS Mobile Safari4.2+】；
三、Web Open Font Format(.woff)格式：
.woff字体是Web字体中最佳格式，他是一个开放的TrueType/OpenType的压缩版本，同时也支持元数据包的分离,支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+】；
四、Embedded Open Type(.eot)格式：
.eot字体是IE专用字体，可以从TrueType创建此格式字体,支持这种字体的浏览器有【IE4+】；
五、SVG(.svg)格式：
.svg字体是基于SVG字体渲染的一种格式,支持这种字体的浏览器有【Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2+】。
这就意味着在@font-face中我们至少需要.woff,.eot两种格式字体，甚至还需要.svg等字体达到更多种浏览版本的支持。
(这里, 我小小偷了一下懒, 我还是用ttf, 因为我还没找一个好点的ttf转woff的软件)
这其中, ttf 转eot, 需要一个小软件, 下载地址 http://download.csdn.net/detail/u010488325/6235387
在f.ttf旁边就多了一个f.eot,
用css hack把f.eot文件加进之前的字体引用中
看效果
总结一下,
用这种方法给一些a标签 ul中的li标签 加一个icon, 其实很方便的, 而且只要制作的字体文件内容不多, 它的大小也就几k吧, 有些情况下相对于图片的icon好一些.
另外, 这种方法做的icon, 只能是纯色的, 像一些icon是有渐变效果的, 还是用图片会好一些啰, 这个在开发的时候自行衡量呗!!
http://bbs.z01.com/PItem?id=12050