很多人都知道，我是网络性能的忠实粉丝。今天我想告诉你如何在WordPress网站上使用系统字体堆栈。
什么是系统字体堆栈？
当涉及到网站时，有不同类型的字体可供选择。你几乎有四种不同的选择：
- Web安全字体： 浏览器需要免费且无下载时间，但通常看起来过时，因此不会使用太多。查看Web安全字体列表。
- Web字体： 看起来很漂亮，但需要通过浏览器下载。提供免费和高级选项。添加到您网站的整体页面权重。但是，它们可以通过缓存的CDN提供。提供商包括Google，TypeKit等。
- 本地托管Web字体：可用的免费和高级选项。仍需要下载时间，可以利用缓存CDN上的单个HTTP / 2连接。
- 系统字体：免费，看起来非常好，因为它们匹配操作系统，无需下载时间！它们由GitHub，Bootstrap，Medium，Ghost，Booking.com（阅读他们的系统字体故事），甚至是你的WordPress仪表板使用。在我个人看来，系统字体在MacOS和Windows上看起来稍微好一些。
系统字体并不新鲜。他们 感觉就像你的操作系统，因为他们使用的是原生字体。许多现代操作系统非常明智地选择字体，并且都具有非常光滑的外观和感觉。这不像是默认为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
因此，您必须选择所需的设置。以下列出了每种操作系统的字体。注意：这会随着时间的推移而发生变化，因此您可能需要在新操作系统出现时重新访问字体。我会确保更新此列表。
系统字体OS– 苹果系统（旧金山）iOS Safari，macOS Safari，macOS Firefox系统UImacOS Chrome，Windows Chrome（新版本）BlinkMacSystemFont（旧金山）macOS ChromeSegoe UIWindows Vista和更新版本宋体Windows XP的RobotoAndroid，Chrome操作系统氧气/氧气KDEFira SansFirefox OSDroid SansAndroid（旧版本）Ubuntu的Ubuntu的坎塔雷尔GNOMEHelvetica NeuemacOS版本<10.11宋体所有无衬线字体所有
如何实现系统字体堆栈
我实际上现在在我的网站上使用系统字体堆栈。我觉得我终于找到了两全其美的东西。我会告诉你我是怎么做到的。
选项1：使用GeneratePress WordPress主题
想让这个超级简单吗？转到GeneratePress主题。在自定义程序中，在“排版”下，您只需选择“系统堆栈”。就是这样！
选项2：使用CSS添加系统字体堆栈
如果你正在使用另一个WordPress，你可以轻松地使用一点CSS移动到系统字体堆栈。
步骤1
在WordPress中，您需要更改font-family上的CSS。我使用MyThemeShop主题，他们使用了一个简单的自定义CSS面板。如果您的主题没有这个，我推荐免费的WP Add Custom 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字体插件。
摘要
系统字体可以替代Web字体和Web安全字体。我仍然非常喜欢我的字体外观，现在我知道它不会给用户带来任何负担。即使很多时候Google字体在本地缓存，它仍然是整个页面权重的一部分。好奇你的想法是什么？您是否使用过WordPress的系统字体堆栈？如果是这样，请在下面告诉我。
