让web更漂亮-七款逐浪webfont字体引用方法开放

发布时间：2015-06-11 浏览次数：分享网址

逐浪webfont字库全面升级，请移步www.ziti163.com体验获取。

本文由逐浪官方发布于2015年6月11日，最后更新时间：2016年8月23日

一共七款字体，分别对应：

繁体创意 ZoomlaXingtiJ

简体草书 ZoomlaXingtiJ2

书法楷体 ZoomlaXingtiJ3

流行草书 ZoomlaXingtiJ4

米芾草书 ZoomlaXingtiJ5

伟人毛体 ZoomlaXingtiJ6

逐浪官方图标 ZoomlaICO

逐浪经典粗黑体 zFont1

逐浪时尚钢笔体 zFont2

*注：后两款为超大字符集，不会漏字，同时所有字库支持SSL读取（即以https:// 方式引用）。

示例：繁体创意webfont引用：
@font-face {
    font-family: "ZoomlaXingtiJ";
    src: url("http://code.z01.com/font/ZoomlaXingtiJ.eot"); /* IE9 */
    src: url("http://code.z01.com/font/ZoomlaXingtiJ.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    
    url("http://code.z01.com/font/ZoomlaXingtiJ.woff") format("woff"), /* chrome、firefox */
    url("http://code.z01.com/font/ZoomlaXingtiJ.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */
    
    url("http://code.z01.com/font/ZoomlaXingtiJ.svg#ZoomlaXingtiJ") format("svg"); /* iOS 4.1- */
    font-style: normal;
    font-weight: normal;
}
.Youcss{font-family:"ZoomlaXingtiJ" !important; font-size:4em; color:#fff;text-shadow:2px 3px 2px #000;}

字体效果：

其中逐浪官方图标，目前引用了两个符号：

UNI码     功能                                      实际字形
uni51F5  逐浪标志图形部份                 凵
uni5202  逐浪LOGO字体部份             刂

提示：在word或wordpad中输入四位UNI码，按ALT+X可以输出相关字形，也可以直接拷上面字形。

引用示例：

@font-face {
        font-family: "ZoomlaICO";
    src: url("http://code.z01.com/font/ZoomlaICO.eot"); /* IE9 */
    src: url("http://code.z01.com/font/ZoomlaICO.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    
    url("http://code.z01.com/font/ZoomlaICO.woff") format("woff"), /* chrome、firefox */
    url("http://code.z01.com/font/ZoomlaICO.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */
    
    url("http://code.z01.com/font/ZoomlaICO.svg#ZoomlaICO") format("svg"); /* iOS 4.1- */
    font-style: normal;
    font-weight: normal;
}
.zlogo1,.zlogo2{ float:left;font-family: "ZoomlaICO"  !important; }
.zlogo1{  font-size:4.6em; color:#28166f;}
.zlogo2{  margin-left:52px; font-size:6em; color:#000;}
.main_table_l{width:170px; background:;}
</style>

<div class="zlogo1">凵</div>
<div class="zlogo2">刂</div>

附：

最近在做一个项目时, 研究了一下新浪微博的前端, 看到首页中那个图标了吗, 以前看到这类效果的第一反应就是用一个gif之类的图标做出来!!

但在研究的过程, 发现了一个小技巧, 注意那个em标签中的文本是E, 但显示出来一个类似ICON的图标.