注册 登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

千年绿叶

黑夜给了我黑色的眼睛,我却用它来寻找光明......

 
 
 

日志

 
 

如何在网页设计中使用个性化字体  

2011-11-04 15:38:42|  分类: 网页设计 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

一个常常令设计师和前端开发人员都头疼的事情就是字体的使用,设计师常常在设计稿中使用某些很漂亮的字体,以实现比较酷炫的界面。但这样常常给编码人员造成一些难度,如果在页面中放弃使用这些字体,设计师会感到郁闷,而如果使用这些字体的话,就要切图并使用很多额外的样式——又一个鱼和熊掌的抉择。还好,现在已经有了一些相关的替代技术了。


1. @font-face

CSS3的@font-face属性(事实上CSS2中就已引入),为我们带来了一些希望,而Firefox 3.5新增的对@font-face的支持,让我们离这个希望更进了一些。

到现在为止,已经有Safari、Chrome、Opera 10和Firefox 3.5支持@font-face了,比较意外的是,IE系列浏览器也部分支持该属性。Mozilla旗下的其它产品,SeaMonkey 2 和Thunderbird 3 也支持该属性。


浏览器兼容性
浏览器 最低版本 支持字体
Internet Explorer 4.0 只支持OpenType字体(eof格式)
Firefox (Gecko) 3.5 (1.9.1) TrueType(ttf格式)和OpenType 字体
Opera 10.0 TrueType和OpenType 字体
Safari (WebKit) 3.1 (525) TrueType和OpenType 字体

从表中可以看出,IE系浏览器不支持TTF格式的字体,只支持eof格式,不过,微软官方发布了一个WEFT工具,可以将TTF转化为EOF,需要的朋友可以去下载使用

可以使用的样式如下:


@font-face {   
font-family: qianduanNet;   
font-style:  normal;      
font-weight: 400;   
src: url("SketchRockwell.ttf");  
}  
.fontFace{   
font-family: qianduanNet;   
font-size: 3.2em;   
letter-spacing: 1px;   
text-align: center;  
}

IE中的样式如下:


@font-face {      font-family: Goudy Stout;      font-style:  normal;      font-weight: 400;      src: url(GOUDYST0.eot);  }

这是目前最简单实现嵌入字体的方法。

  评论这张
 
阅读(417)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018