7

我在我的网站中使用自定义字体。我可以使用本地字体文件：

src: local('Ubuntu'), url('fonts/ubuntu.woff') format('woff');

或者只是使用谷歌的：

src: local('Ubuntu'), url('http://themes.googleusercontent.com/static/fonts/ubuntu/v4/_xyN3apAT_yRRDeqB3sPRg.woff') format('woff');

考虑到页面加载时间，哪个会更快？

4

1 回答 1

14

我设置了一个带有两个测试页面的 GAE 应用程序，一个使用 Google Web Fonts，一个使用本地文件。我确保没有缓存，并记录了每个页面加载的时间。这在 Chrome 上重复了 20 次。

结果

  • 平均加载时间（谷歌网络字体）：486.85 毫秒
  • 平均加载时间（本地文件）：563.35 毫秒

在此处输入图像描述

代码

字体-google.html

<!DOCTYPE html>
<html>
    <head>
        <title>title</title>
        <link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>
        <link href='both.css' rel='stylesheet' type='text/css'>
    </head>
    <body>
        <h1>This is a heading</h1>
    </body>
</html>

字体-local.html

<!DOCTYPE html>
<html>
    <head>
        <title>title</title>
        <link href='fonts-local.css' rel='stylesheet' type='text/css'>
        <link href='both.css' rel='stylesheet' type='text/css'>
    </head>
    <body>
        <h1>This is a heading</h1>
    </body>
</html>

字体-local.css

@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: normal;
  src: local('Ubuntu'), url('ubuntu.woff') format('woff');
}

两个.css

h1 {
  font-family: 'Ubuntu';
}
于 2012-03-25T12:18:07.590 回答