使用@ font-face将自定义字体上传到CSS文档是否会使事情呈现得更慢？

Question

我从dafont.com下载了一种字体，然后将其添加到当前仅在我的计算机上的html文件的样式表中。 我更改了大多数按钮以使用该字体，但是由于自定义字体，现在它的加载速度似乎变慢了（它过去几乎在我的浏览器中立即呈现）。 有没有一种方法可以解决计算机本地文件的问题，并且在将页面实际上传到网站后，还会导致页面渲染缓慢吗？

Answer 1

您可以尝试不同的方法来提高性能：

• 在检查在线版本之前，请先使用local参考：这将在您的计算机上运行，​​但您永远不知道用户是否安装了具有相同名称的其他字体（这不太可能，但这可能会破坏您的预期外观。 ）。
• 渲染页面后，请使用惰性加载来下载字体：这可能并不是真正有用，因为您使用的字体是页面上的主要字体。
• 对于不打算使用的字体，不要包括@ font-face：无论是否使用，某些浏览器都会下载这些字体。
• 如果可能，请使用外部托管的字体（例如，在Google字体中）：如果字体是从以前的访问中缓存的，则可以使您的页面更快，并且与您的主机之间只有一个连接。
• 听起来有些不对，但是：明智地选择字体。 如果您选择漂亮的字体但文件大小为10MB，则是否会影响性能。 与文件大小有关，
• 如果可能，请gzip您的字体文件：它们的重量会减轻，下载时间也将减少。

在链接上阅读有关此主题的更多信息：

• 防止性能受到自定义字体的影响 。
• @ font-face和性能