@font-face优化处理办法

2014年10月15日 网站建设 暂无评论 阅读 92 views 次

下面的语法是你如何使用@ font-face的。首先,定义新的字体所提供的名称和说明的字体。

@font-face {
    font-family: DeliciousRoman;
    src: url('http://www.font-face.com/fonts/delicious/Delicious-Roman.otf');
}

然后你引用它。

p {
    font-family: DeliciousRoman, Helvetica, Arial, sans-serif;
}

就是这样。

在前面的例子中使用外部来源。但是,如果将字体文件是在您的服务器上,那么你可以参考以下的方式:

@font-face {
    font-family: DeliciousRoman;
    src: url('…/Delicious-Roman.otf');
}

此外,还有其他三个字体属性,您应该知道的。首先是font-stretch,您可以设定的字体会被拉伸,“normal’”是默认的。此外,有字体的风格,让你的字体是斜或斜体。最后,还有字体的重量,最后字体为粗体,等你可以自己设置.

用以上方法,可能导致浏览器假死。所以可以采用下面的方式,用js进行优化。

1 function lazyload() {
2 var sRule1 =
3 "@font-face {" +
4 " font-family: 'Yanone';" +
5 " src: url('/bin/resource.cgi?type=font&sleep=6');" +
6 " src: local('Yanone'), " +
7 "url('/bin/resource.cgi?type=font&sleep=6') " +
8 "format('truetype');" +
9 "}";
10
11 var style1 = document.styleSheets[0];
12 if ( "function" === typeof(style1.insertRule) ) {
13 // Firefox, Safari, Chrome
14 style1.insertRule(sRule1, 0);
15 }
16 else if ( "string" === typeof(style1.cssText) ) {
17 // IE
18 style1.cssText = sRule1;
19 }
20 }

 

 

  • 只在你确定你非常需要 @font-face的时候才使用他
  • 将你的@font-face定义在所有的SCRIPT标签前
  • 如果你有许多字体文件,考虑将它们分散到几个域名下。
  • 不要包含没有使用的 @font-face声明——IE将不分它使用与否,通通加载
  • Gzip字体文件,同时给它们一个未来的过期头部声明
  • 考虑字体文件的后加载,起码对于IE。

 

谷歌字体

谷歌字体是谷歌的API,你必须选择在您的网站中使用的字体的集合。所有的字体都是免费的,开放源码的。他们的选择是相当大的,包括许多伟大的字体。此外,您还可以自由选择你喜欢的。一旦你选择了你的字体,你给出的代码片段,将其粘贴到您的网站。谷歌允许您选择不同的代码,如将CSS导入到您的<head>标签。

谷歌字体

当谈到谷歌的字体,那肯定是一个易于使用的服务。有一件事是你要知道的:它会告诉你你所选择的字体对您的网站的加载时间的负载。

给我留言

您必须 登录 才能发表留言!

Copyright © 大一网 保留所有权利.  

用户登录

分享到: