自定义网页字体

 

在自定义这个博客主题过程中使用了某些特定字体,

这些字体并非操作系统的内置字体,

这样用户在浏览页面的时就有可能看不到设计时效果,

导致页面显示很丑陋.

 

一般的解决办法是把文字体成图片,

但是有点麻烦, 不适合我的样的懒人,

而且做成图片也不方便修改.

还有一种是通过CSS样式定义,

我选择了这种, 因为它简单易用.

 

CSS中使用@font-face属性来实现在网页中嵌入任意字体，

稍稍复杂一点的问题是每种浏览器都有自己的字体格式要求。

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

 

那么为了主流的浏览器们都能正常显示必须将字体转换为以上这些格式才行,

但是这样就违背了"懒人原则".

[当girl手中的一支棒棒糖就快被抢走时,一只hero出现了! "放开那个girl!".. ]

恩, 我们的hero也没有迟到 http://www.fontsquirrel.com/fontface

该网站有很多别人制作完成的字体(适用于主流浏览器们的),

选择任意一款下载后你会得到一年压缩包，

解压后通常会得到*.eot,*.svg,*.ttf,*.woff和stylesheet.css等文件，

其中*.eot,*.svg,*.ttf,*.woff为字体文件，

放到自己站点的域空间内。

stylesheet.css为样式定义(也就是自定义字体部分),

@font-face { 

  font-family: 'fontName';       /* 字体名称,可自己定义 */

  src: url('fontName.eot'); 

  src: local('fontName Regular'),

    local('fontName'), 

    url('fontName.woff') format('woff'), 

    url('fontName.ttf') format('truetype'),  

    url('fontName.svg#fontName') format('svg');

}

将其内容复制到自己的样式表中就可以了, (注意URL部分与自己域空间内字体文件路径相匹配)

/* 使用方法 */

<p style="font-family: fontName">hello world!</p>

这样基本就完成了.

看, 本博客左上的文字是不是很帅.. :)

 

如果要制作自己的字体也可以, http://www.fontsquirrel.com/fontface/generator

但貌似是收费的..  -_-!