逐浪技术--Zoomla!逐浪CMS官方博客

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

作者:浪花 发布时间:2015-06-11 来源:本站原创 点击数: 分享网址

浪花

博主:浪花
个人座右铭:似水的年华,谱写青春的歌曲,还有一起奋斗的同事,以及激情的浪花~!

本文由逐浪官方发布于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;}
字体效果:

1.jpg

 

 

未标题-1.jpg

111.jpg






 

1111.png

 

 

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

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的图标. 

 

既然是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




本文责任编辑: 本站编辑  加入会员收藏夹 点此参与评论>>

对[让web更漂亮-七款逐浪webfont字体引用方法开放]这条信息感兴趣吗?您还可以点击联系我们以确定进一步意向。


当前网址: 复制网址


上一篇文章:IBM Rational AppScan上的逐浪CMS安全测试 下一篇文章:如何在Dreamweaver中使用emmet(ZenCoding)

+什么是CMS

CMS(Content Management System)是网站内容管理系统简称, 互联网上每个网站(无论大小门户)其后台都由专业CMS系统支撑- Zoomla!逐浪CMS作为国内高端CMS与WEB应用典范,首创第3代CMS理念,专注底层核心技术研发,以云技术、创新精神构建行业新成就,提供从网站内核到电商、办公、移动一体化的开发体验!

7×24小时服务热线 021-50391046 技术支持:13177777714
©Copyright 2003- 逐浪软件z01.com版权所有 All rights reserved
中华人民共和国网警备案号:3601040103 经营许可证号:工商3601002021063 沪ICP备09077823号
本网站基于®Zoomla!逐浪CMS内核开发

ISO9001国际认证企业 CSDN外包TOP资质 鉴赏MTV电广视告 7×24小时全天候贴心服务 社会征信网 网络110