html - 我对是否将图像用于文本或谷歌字体有些困惑

Question

我想使用一种不流行的字体。这种字体存在于谷歌字体和 Photoshop 中。我很困惑，因为这两种方式都会有一些加载时间，我知道图像不是文本的好方法(但至少图像将是内部的)，但是谷歌字体会引入一些开销，因为将从外部来源

哪种方法性能好(加载速度方面):

1) 使用 Photoshop 编写文本并将其保存为图像，而不是在我的网页中使用图像？或

2) 使用谷歌字体？

3) 如果使用谷歌字体。我是否必须下载所有格式的字体文件，然后将其放入我的网站文件夹中？或者我只是使用 html 链接标记？哪个更有效率。

非常感谢。

Answer 1

Google 字体是 CDN，因此它们占用您的服务器资源为零(而图像占用)。也就是说，Google 字体会减慢您的页面速度。但通常仅当您使用少数字体时。我根本不关心 1 或 2。总的来说，这两种方法最终都几乎没有问题。

但是，将图像用于文本是一种闪回 1998 年的做法。糟糕的做法。对您来说更是如此，因为更新文本、更改设计、运行 A/B 测试、可访问性、搜索引擎优化和维护网站将成为 a** 中的主要痛苦。最简单的答案？ 避免它。

直接来自 Google 字体网站:

Tip: Using many font styles can slow down your webpage, so only select the font styles that you actually need on your webpage.

Tip: If you choose only the languages that you need, you'll help prevent slowness on your webpage.

示例用法:

// include in the <head/> of your website
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

然后:

// in your css:
h1 { font-family: 'Open Sans', Arial, serif; font-weight: 400; }

完成。资源很少。