@font-face优化处理办法

作者daliane

下面的语法是你如何使用@ 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>标签。

谷歌字体

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

类似文章