如何将wordpress字体将转移到系统字体

很多人都知道,我是网络性能的忠实粉丝。但我也不认为它应该或必须妥协设计。中间始终保持良好的平衡。有一天,我在GitHub的博客上,正在挖掘他们的字体!它非常容易阅读。所以我用Chrome Devtools挖掘了属性,发现他们使用的是系统字体堆栈。所以今天我想向您展示如何在WordPress网站上使用系统字体堆栈。

什么是系统字体堆栈?

当涉及到网站时,有不同类型的字体可供选择。你几乎有四种不同的选择:

  • Web安全字体:  浏览器需要免费且无下载时间,但通常看起来过时,因此不会使用太多。查看Web安全字体列表。
  • Web字体: 看起来很漂亮,但需要通过浏览器下载。提供免费和高级选项。添加到您网站的整体页面权重。但是,它们可以通过缓存的CDN提供。提供商包括Google,TypeKit等。
  • 本地托管Web字体:可用的免费和高级选项。仍需要下载时间,可以利用缓存CDN上的单个HTTP / 2连接。
  • 系统字体:免费,看起来非常好,因为它们匹配操作系统,无需下载时间!它们由GitHub,Bootstrap,Medium,Ghost,Booking.com(阅读他们的系统字体故事),甚至是你的WordPress仪表板使用。在我个人看来,系统字体在MacOS和Windows上看起来稍微好一些。

系统字体并不新鲜。事实上,Medium 自2015年以来一直在使用它们。他们  感觉就像你的操作系统,因为他们使用的是原生字体。许多现代操作系统非常明智地选择字体,并且都具有非常光滑的外观和感觉。这不像是默认为Arial或Times New Roman的网络安全字体……没有人喜欢那些。

最重要的是,系统字体的工作方式与Web安全字体类似,因为浏览器不需要任何下载时间。这有助于降低网站的整体网页权重。截至2017年4月,网络字体平均占网站总重量的4%左右。虽然这不是很大,但请记住,您所做的每一个小优化都会增加到一个快速的网站。

系统字体堆栈CSS

使用带有Web字体的font-family属性,通常会有主要字体和一个或两个后备字体。对于系统字体,您必须包含所有不同的操作系统,因此您必须堆叠更多字体。这就是它被称为“系统字体堆栈”的原因。

例如,以下是CSS可能与Web字体一起出现的方式。

font-family: "Open Sans","Helvetica Neue",sans-serif;

这是系统字体堆栈的外观。

font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"

您知道您的WordPress仪表板使用系统字体堆栈吗?这是他们正在使用的。

font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif

CSS-Tricks还有一种关于如何使用@ font-face应用系统字体的替代方法。

系统字体堆栈Cheatsheet

因此,您必须选择所需的设置。以下列出了每种操作系统的字体。注意:这会随着时间的推移而发生变化,因此您可能需要在新操作系统出现时重新访问字体。我会确保更新此列表。

System font OS
-apple-system (San Francisco) iOS Safari, macOS Safari, macOS Firefox
system-ui macOS Chrome, Windows Chrome (new versions)
BlinkMacSystemFont (San Francisco) macOS Chrome
Segoe UI Windows Vista and newer
Tahoma Windows XP
Roboto Android, Chrome OS
Oxygen / Oxygen-Sans KDE
Fira Sans Firefox OS
Droid Sans Android (old versions)
Ubuntu Ubuntu
Cantarell GNOME
Helvetica Neue macOS versions < 10.11
Arial All
sans-serif All

如何实现系统字体堆栈

我实际上现在在woorkup.com上使用系统字体堆栈。我觉得我终于找到了两全其美的东西。我会告诉你我是怎么做到的。

选项1:使用GeneratePress WordPress主题

想让这个超级简单吗?转到GeneratePress主题,这是我在所有网站上使用的主题。在自定义程序中,在“排版”下,您只需选择“系统堆栈”。就是这样!

生成Press主题系统堆栈
生成Press主题系统堆栈

选项2:使用CSS添加系统字体堆栈

如果你正在使用另一个WordPress,你可以轻松地使用一点CSS移动到系统字体堆栈。

步骤1

在WordPress中,您需要更改font-family上的CSS。我使用MyThemeShop主题,他们使用了一个简单的自定义CSS面板。如果您的主题没有这个,我推荐免费的WP Add Custom CSS插件

自定义css mythemeshop
在WordPress中添加自定义CSS

第2步

然后我输入以下代码。这可能因主题而异,但对于大多数情况,这应该覆盖所有内容。我使用与GithHub相同的系统字体堆栈,除了我添加“system-ui”作为Chrome支持的新版本。请记住,它们将按照它们在堆栈中出现的顺序使用。

body {font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";}
h1,h2,h3,h4,h5,h6 {font-family:-apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";}

第3步

您还需要禁用从WordPress主题加载的任何第三方字体。这可能会有所不同,因为每个开发人员都以不同的方式包含字体。如果您使用的是MyThemeShop主题,则只需打开选项/ google-typography / google-typography.php文件,找到以下行:

echo $frontend

并替换为:

// echo $frontend;

这将禁用任何Google字体加载。如果您使用的是默认的WordPress主题,则可以轻松使用免费的禁用Google字体插件

速度测试之前和之后

当然,我无法抗拒。这是速度测试之前和之后。每次测试运行5次并取平均值。

之前的速度测试

这是我加载Google字体之前的速度测试

在系统字体之前
使用Google字体进行速度测试

之后的速度测试

这是使用我的系统字体堆栈之后的速度测试。正如您所看到的,我将整个页面的重量减少了大约60 KB,并且删除了三个请求。一个到fonts.googleapis.com,然后下载2个不同的Roboto字体重量版本。该系统字体堆栈比使用谷歌的字体快了约6% 

用系统字体堆栈进行速度测试
用系统字体堆栈进行速度测试

我知道很多网站使用4-5种不同的字体粗细或样式,有时甚至是2-3种不同的Google字体。所以你甚至可以看到比我做的更大的改进。

我还将我们的wpcoupons.io  WordPress网站移动到系统字体并取得了很好的效果,请查看下面的速度测试

系统字体速度测试
EDD站点与系统字体

摘要

系统字体可以替代Web字体和Web安全字体。我仍然非常喜欢我的字体外观,现在我知道它不会给用户带来任何负担。即使很多时候Google字体在本地缓存,它仍然是整个页面权重的一部分。好奇你的想法是什么?您是否使用过WordPress的系统字体堆栈?如果是这样,请在下面告诉我。

留下评论