@font-face

2016-10-28 · 🙈Ray · 0条 · 318次

在个人网站中,我们往往特别希望能够与众不同。这就是为什么很多人花时间自己开发博客,而拒绝使用像Wordpress和Typecho等这类博客,它们难免千篇一律。

对于网站的字体也是一样的道理,看多了普通字体,难免觉得没有意思。所以换个有意思的字体还是不错的。

什么是font-face

@font-face是CSS3的一个模块,把自己定义的WEB字体嵌入到网页中,可以在网页中显示电脑中没有安装的字体。

在CSS3之前,必须使用在计算机中安装好的字体。现在,我们可以使用任意喜欢的字体。

浏览器支持

Firefox、Chrome、Safari以及Opera支持.ttf和.otf类型的字体。

IE 9+支持.eot类型的字体。(字体类型请参考WEB字体格式&字体在线转换网址推荐

IE 8以及更早的版本不支持@font-face规则。

题外:我觉得就放弃IE吧,应该主动屏蔽IE。倒不是因为IE有多不好,而是大部分政府机构&国企的网站都只能通过IE进行操作,这很鸡肋啊。我对于IE印象不好全是他们干的。

font-face属性

使用

1.下载想要使用的字体文件,注意字体的版权问题。

因为不同浏览器对于字体格式的支持是不一样的,所以可能要多种不同格式的同一字体,但是很难下载到,格式转换的网站也有,但是对中文支持不好,英文倒是可以的。如果网站为英文,那么很容易就可以通过某种格式得到其他格式,但是,如果是中文,可能转完了就只转换了英文部分,很鸡肋。中华文化博大精深,不好搞啊。

2.使用@font-face语法进行定义。

定义方式是指定font-face属性一节中提到的属性值。示例:

@font-face {

font-family: 'ZhuLangYaSong';

src:url('/font/ZhuLangYaSong/ZhuLangYaSong.otf') format('opentype');

font-weight: normal;

font-style: normal;

}

3.在网页中指定字体。

p{

font-family:"ZhuLangYaSong";

}

我的网站就是通过这种方式使用自己喜欢的字体。

另外一点值得说明的是:并不是所有的字体都适合做网站字体,因为阅读性的问题,有些字体虽然“奇特”,让人眼前一亮,但是读起来并不好读,这样就会让网站的访问者或者用户感到疲倦,难以深入阅读。

我觉得我网站的字体就不是很好阅读,毕竟好看又好读的字体真的不好找啊。

#iefix

如下图所示,font-face中有一处包含#iefix。这是对IE9以前的IE浏览器做的支持。在IE9之前,它们仅支持微软自己开发的eot格式的字体。

而第一行src是为了支持IE9的兼容模式,在IE9兼容模式(兼容IE7和IE8)下,#iefix会不起作用。


  0