使用本地字体文件还是Google Web Fonts更有效率，考虑页面加载时间？

Question

使用本地字体文件还是Google Web Fonts更有效率，考虑页面加载时间？

cssfontsfont-facewebfontsgoogle-webfonts

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');

在考虑页面加载时间的情况下，哪个更快？

- fj123x

Google API可能是更好的选择，因为你使用的字体可能未安装在每个用户的计算机上，但在使用Google API的情况下不会有任何区别。我认为通常字体大小并不是很大，因此字体对加载速度没有影响，一旦用户加载页面，字体将保存在缓存内存中。 - user1280616

在网上搜索内容分发网络。谷歌版本可能更快。 - yunzen

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- melhosseiny · Accepted Answer

我使用GAE建立了一个应用程序，其中包含两个测试页面，一个使用Google Web Fonts，另一个使用本地文件。我确保没有缓存，并记录了每个页面加载所需的时间。这在Chrome上重复了20次。

结果

平均加载时间（Google Web Fonts）：486.85毫秒
平均加载时间（本地文件）：563.35毫秒

输入图像描述

代码

fonts-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>

本地字体.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>

本地字体样式表

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

both.css

h1 {
  font-family: 'Ubuntu';
}