网络编程
位置:首页>> 网络编程>> 网页设计>> 如何在网页设计中使用个性化字体

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

作者:神采飞扬 来源:前端观察 发布时间:2009-07-07 11:29:00 

标签:设计,个性化,字体,cufon,font-face

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

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 Explorer4.0只支持OpenType字体(eof格式)
Firefox (Gecko)3.5 (1.9.1)TrueType(ttf格式)和OpenType 字体
Opera10.0TrueType和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);
}

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

@font-face资源:

sIFR

sIFR并非一种新技术,而是已经存在并被使用很多年了。sIFR是一种很有用也很好用的文本替换技术,通过Flash+JS+CSS将网络字体嵌入到页面中。

考虑到网上已经有很多资源,本文就不再赘述,想要了解的朋友可以参考一下文章:

  1. 如何以及何时使用sIFR

  2. sIFR-文本替换技术

  3. sIFR——百度百科

Typeface.js

Typeface被认为是替代SIFR的最佳方案,相对于sIFR,Typeface少了Flash的应用,使用纯JS来嵌入相关字体,而且用法也很简单:在页面中引入相应的js文件就OK了。

<html>
  <head>
<!-- 加载所有的样式先 -->
    <link rel="stylesheet" type="text/css" ref="/style.css">
<!-- 再加载typeface.js 库文件和typeface.js字体文件-->
    <script type="text/javascript" src="typeface-0.10.js"></script>
    <script type="text/javascript" src="helvetiker_regular.typeface.js"></script>
  </head>
  <body>
<!-- 继续并使用CSS指定typeface.js 字体 -->
    <div class="myclass typeface-js" style="font-family: Helvetiker">
      文本文本...
    </div>
  </body>
</html>

从中我们可以看出来,使用Typeface只需要着简单的几步就可以在页面中使用嵌入字体了。

typeface资源:

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com