欢迎来到 jackNEss'窝窝
I like simple mind

使用 @font-face 个性化你网站的字体

2011年10月21日

有时候,由于设计的需要,网站中难免会用到一些比较特殊的字体如 华康少女字体 来装饰我们网站的部分,让其不那么死板,然而由于如果想调用这个字体,一般来说,除非用户电脑上本来就有安装这个字体才能正常显示,否则页面渲染会调用TA电脑上已有的字体来替代。故实现个性化字体不能单纯使用 font-family 能实现。

所以我们页面制作的时候一般会用图片来代替这些比较特殊的字体,不过这样的做法只适合于 特殊字体应用范围较少的网站。而且用图片代替文字的做法,并不方便修改。

在这里为大家介绍的是 css3 的 @font-face 属性,个性化我们站点中的字体。

css3 @font-face

说@font-face是CSS3的新特性并不准确,因为CSS2就已经支持了这一特性,并且Internet Explorer早在第5版的时候就已经支持它了,不过IE实现方式是通过自有的eot(Embeded Open Type)字体格式,其它浏览器都不支持这个格式。@font-face支持如下属性:

  • font-family:设置文本的字体名称。
  • font-style:设置文本样式。
  • font-variant:设置文本是否大小写。
  • font-weight:设置文本的粗细。
  • font-stretch:设置文本是否横向的拉伸变形。
  • font-size:设设置文本字体大小。
  • src:设置自定义字体的相对路径或者绝对路径。

下面是几种主流浏览器对于字体格式的支持情况:

  • .TTF或.OTF,适用于Firefox 3.5、Safari、Opera
  • .EOT,适用于Internet Explorer 4.0+
  • .SVG,适用于Chrome、IPhone

假设 我们页面要用一种 HKshaonv 字体:

/*css document*/
@font-face:{
	font-family: 'HKshaonv';
    src: url('hkshaonv-webfont.eot');
	src: url('hkshaonv-webfont.eot?#iefix') format('embedded-opentype'),
         url('hkshaonv-webfont.woff') format('woff'),
         url('hkshaonv-webfont.ttf') format('truetype'),
         url('hkshaonv-webfont.svg#HKshaonv') format('svg');
    font-weight: normal;
    font-style: normal;
}

然后在我们需要应用到这个字体的类中定义font-family即可:

/*css document*/
.txtBox{font:32px/1.8em HKshaonv,Tahoma,'\5b8b\4f53',sans-serif;}

演示地址:http://www.jackness.org/lab/font-face/demo.html

制作自己的字库

我们看国外的一些网站都局部地运用 font-face 来美化他们的网站,但是,和我们天朝不一样的是,他们的字库只用几十kb 的大小(英文字母 26+26 再加些标点符号),而我们的中文字库动不动就几M甚至 几十M不等,为了美化我们的网站而在字体上面增加几M的流量是很不明智的选择。

所以,我推荐的做法是,把常用的文字添加到一个新字库里面,把不常用的去掉,做个精简版的字库来满足我们的各种需求。

font creator

我们可以使用 font creator 这个软件来制作自己的字库,下面稍微介绍一下这个软件的使用方法。

首先,打开 font creator 导入想精简的字库文件

按 ctrl + F 调出查找功能,根据字符的 unicode 码进行查找。

在这里,稍微说一下如何知道文字的unicode码,获取汉字的 unicode码可以通过js的 escape() 方法 实现:

//javascript
var uni = escape("杰");
alert(uni);

演示地址:http://www.jackness.org/lab/font-face/escape.html

alert出来的代码中,%u 后面的 4位数字即为 unicode码,我们把这个输入到查找框那里 即可找到相应的汉字。

然后我们新建一个字体库,并把多余的字通通删掉,然后右键空白处选择添加,生成一个空白的字体存放单元,ctrl+C 完整字库中需要添加的汉字,选择新字库中新建的空白字体存放单元,ctrl + V。

然后右键新添加的文字 选择 属性

选择 映射 选项卡,在映射区块右侧 输入 字体的 unicode 码 点击添加。

这样就能在字库中成功添加一个新的成员。

Font Squirrel

通过 font creater 或者网上下载的字体 一般都是 TTF格式,要生成其他格式的文件,在这里我推荐一个 在线免费转换字体格式的站点 Font Squirrel

值得注意的是,该网址只支持1M以下的字体上传。

通过这个站点所生成的压缩包,解压出来就已经满足我们各个浏览器的需要了,还提供了一个demo文件用于测试。十分方便。

分类HTML + CSS
阅读 3,099
  • 评论加载中...

标签云

分类目录

最新留言

  • 评论加载中...

与我联系

如有疑问or建议可通过以下方式跟我取得联系.

Q Q:373435871
Email:jackness1208@gmail.com
© Copyright 2011 - 2014 jackNEss.org All Rights Reserved 粤ICP备14065612号
首页 | 关于我 | 网站地图 | RSS