完美的跨平台衬线字体和无衬线字体堆栈

不同的浏览器在相同的操作系统上使用相同的默认字体。然而,操作系统之间的默认字体是不同的,而且很少有随处可用的字体。在本文中,我将重点关注如何使默认字体在不同操作系统之间具有相同的外观和行为。

通用“Serif”和“SANS-SERIF”(不含SERIFS)字体的默认字体在麦斯卡斯卡,iOS,Windows和Chrome操作系统中兼容。Linux也有很好的选择,但那些很少设置为默认字体。Android只有一个字体,所以你得到了你得到的东西。

几个字体中的每个单独字符都具有与另一字体中相同的字符相同的宽度。测量兼容性意味着您可以在文档中替换一个字体,而不会影响其布局。例如,标题和段落应填充相同数量的文本。这与固定宽度字体(单座)不同,其中字体中的所有字符都具有相同的宽度。

我们应该感谢PostScript打印标准,它定义了一组每个人都必须支持的核心字体。并不是每个平台都包含标准中指定的字体;因为版权问题和授权费用。然而,跨平台使用这些字体仍然是可能的。

CSS允许你在一个有序的“字体堆栈”中列出多种字体。Web浏览器将从列表中选择他们识别的第一个安装的字体。让我们创建一个在不同平台上看起来和行为几乎相同的字体堆栈。那么,我们要用什么字体呢?

PostScript版本1需要一个衬线字体,时间;还有一种无衬线字体,Helvetica。这些字体应该在每个操作系统上都可用。下表显示yabo亚博体育下载了除Linux外的大多数操作系统的默认字体。稍后我将在本文中回到Linux。

默认字体(拉丁文脚本)
字体的名字 衬线 无衬线
窗户 英语字体格式一种 天线
铬操作系统 蒂诺斯 arimo.
苹果系统 Helvetica.
iOS. 英语字体格式一种 Helvetica.

Tinos和Times New Roman,顾名思义,都是经典的Times字体的更新版本。它们提高了文字的易读性,并淡化了一些衬线的装饰。Arial是对经典Helvetica字体的重新诠释(在更便宜的许可下)。MacOS也同时使用Arial和Times New Roman字体。

如果您愿意牺牲一点韵律的兼容性,您可以将默认的无衬线字体升级到更现代的版本。Mac和iOS也预装了Helvetica Neue。它解决了Helvetica的一些易读性问题,例如通过延长横杆和加重标点符号。总的来说,升级到Helvetica Neue可能是比切换到Arial更好的选择。

在Windows上,你可能会发现一个更现代的Arial版本,叫做Arial Nova。与Helvetica Neue一样,Arial Nova在易读性方面做出了很大的改进和妥协。它不是预装在Windows中,而是在Windows和微软商店应用程序的泛欧辅助字体包(可选功能)中免费提供的。

您可以考虑使用这些字体作为对经典字体的渐进式增强。他们可以在可用时提高阅读体验,但如果不是,这不是一个很大的损失。与原件相比,您的布局可能会在使用这些字体时稍微稍微稍微偏移。如果这是Showstopper,您可以将它们从字体堆栈中排除。

让我们用一个CSS例子来总结一下目前为止我所讲的内容:

.headlines,.ui {font-family:'helvetica neue','arial nova',sans-serif;} .body-text {font-family:serif;}

注意,我没有指定Helvetica或Arial,因为它们已经是无衬线组中的默认字体。当没有新的字体时,你会得到这些字体。这假设这份文件是用拉丁文字写的,并且被正确地标记为拉丁文字。

确保Web浏览器知道使用通用字体名称时页面写入的语言!始终指定文档语言,例如文档语言。使用< html lang =“en”>.当涉及到其他书写系统的默认字体时,所有的赌注都落空了。

如果无法控制文档语言,则需要在字体堆栈中包含所需字体的名称。顺序很重要,所以在渐进式增强字体之后包含默认值。讨论操作系统如何处理字体的另一个方面;这里是与上面相同的字体堆栈,但包括默认字体。

{font-family: 'Helvetica Neue', 'Arial Nova', Helvetica, Arial, sans-serif;} .body-text {font-family: Times, 'Times New Roman', serif;}

请注意,我在新罗马的次数前面列出了时间。新罗马的时代可以比时间更好地说。但是,与麦克斯分发的新罗马的版本缺少普通字形脱离等功能。时代在Mac提供更好的体验。我稍后会回到这一点,但时间也在Linux上产生了更好的结果。

我仍然包含了无法使用这些字体的平台的通用字体名称。Android只预装了一两个系统字体族。Roboto是一个无衬线自Android版本4(发布于2013年)。今天它仍然是默认的无衬线字体,但在更新的设备上,你可能还会发现Noto衬线字体。你至少可以决定是衬线字体还是无衬线字体。这两种字体在度量上彼此兼容。Roboto和Helvetica也很接近。

在上面的示例中,由于字体名称替换而飙升速度的复杂性。Windows将从PostScript标准中识别时代和Helvetica字体名称,并替换它们以供新罗马和ARIAL。你可以逃脱只是指定时间和Helvetica。(从技术上讲,由于通用字体名称,您不需要 - 但是您得到了我的意思!)

Chrome OS使用新的罗马和Helvetica字体名称的时间应用于相同的技巧。如上表所示,iOS还替换了次数字体的新罗马。

现在您应该已经了解了足够多的Linux上的默认字体!Linux有很多版本,不同的发行版有不同的默认和预安装字体。不过,它们都有一个共同点:它们依赖于FontConfig来处理它们的字体配置。(并非巧合,Chrome OS也是如此。)

FontConfig具有与Windows中的类似的字体名称替换系统。现在是两个表来涵盖Serif和SANS-Serif字体名称替换的时间。

Serif字体名称替换(拉丁文脚本)
分配 衬线 英语字体格式一种
覆盆子PI OS 21.01 解放衬线 解放衬线 解放衬线
Ubuntu / Mint / Pop!_OS 21.04 DejaVu衬线 灵气罗马 解放衬线
Fedora 34 DejaVu衬线 灵气罗马 解放衬线
ElementaryOS 5.1 dejavu serif * 蒂诺斯 蒂诺斯
solus 4.2 清除SANS† 尼姆斯罗马‡ 解放丝绸
endeavoros 21.04 DejaVu衬线 尼姆斯罗马‡ 解放衬线
openSUSE 15.3 DejaVu衬线 尼姆斯罗马‡ 解放丝绸
  • * ElementaryOS打算使用Tinos作为通用名称。这是一个不能工作的bug。我已经把项目发过去了一个补丁
  • †这是无衬线字体!
  • ❒默认情况下未安装。您可以使用通用Serif字体。
SAN-SERIF字体名称替换(拉丁文脚本)
分配 无衬线 Helvetica. 天线
覆盆子PI OS 21.01 解放无 解放无 解放无
Ubuntu / Mint / Pop!_OS 21.04 DejaVu无 灵气罗马 解放衬线
Fedora 34 DejaVu无 灵气罗马 解放衬线
ElementaryOS 5.1 arimo. arimo. arimo.
solus 4.2 清晰的SAN 灵气无‡ 解放SANS‡
endeavoros 21.04 DejaVu无 尼姆斯罗马‡ 解放无
openSUSE 15.3 Cantarell. 灵气无‡ 解放SANS‡
  • ❒默认情况下未安装。您可以使用通用Serif字体。

DejaVu字体家族在度量上与Times和Helvetica都不兼容。像DejaVu Sans和Cantarell这样的字体更接近Verdana字体。Verdana是一种较重、较宽的字体,是为过去几十年超低屏幕分辨率而设计的。Clear Sans与Arial非常相似,但它略宽,x高度较低。这是一个接近的匹配,但不兼容的度量。

摘要:Linux上的默认通用字体名称不会解析与PostScript字体兼容的字体。这就是为什么网页上的文本通常在Linux上看起来非常不同,而与麦克斯和窗户相比。raspberry pi os和mexhelaryos是部分例外。

您可以将通用字体名称依赖于其他操作系统上的通用字体名称。但是,命名字体名称替换字体是更好的选择。Nimbus字体系列提供了一个罗马变体,它与时间几乎兼容。Helvetica还有一个SANS变异替代品。同样的解放字体家族的Serif变体为时代新罗马,以及Helvetica的SAN。虽然字体名称替换在所有Linux发行版上主要是功能,但默认情况下,不一定安装的字体不一定。

字体名称替换配置在Linux上全部有大量问题。Solus直接向上返回SAN-Serif字体而不是Serif字体。它是名称替换,但随后不会预先安装这些字体。相反,您可以获得通用Serif字体(配置为SAN-Serif字体!)用户可以安装字体来解决问题,但它们可能没有意识到他们缺少。

树莓派操作系统和基本操作系统包括一个较老版本的Nimbus字体家族,但名称略有不同。字体名称替换系统无法识别那些较老的名称。光轮字体家族在2015年前后被重新设计并重新命名。旧的字体被命名为Nimbus Sans L和Nimbus Roman No9 L。你可以将它们包含在你的字体堆栈中,以增加与旧系统的兼容性。然而,较老的字体质量不如最近的同类字体。具体来说,字距低于标准。

Nimbus Roman的现代版本是更好的替代新罗马的替代品。它视觉上的比赛比解放服务更近。您应该包括字体名称灵气罗马之前英语字体格式一种在你的字体堆里。如果你已经列出了,你可以跳过这个罗马之前英语字体格式一种(如本文的推荐)。

似乎包括我们字体堆栈中的默认字体名称是正确的方法。字体堆栈中的更多常见字体名称为字体名称替换系统提供更多省去当天的机会。它还扫描了地毯下方讨论的国际化问题。

总之,无论是MacOS、iOS、Chrome OS还是Windows都不需要你指定默认的衬线字体和无衬线字体名称。通用的字体名称就足够了。(只要你指定了文档语言!)将它们包含在Linux中可以更好地选择字体;甚至连一个预先安装的字体都没有命名。通过使用新版本的字体,您可以牺牲少量的字体稳定性来提高可读性。

现在你知道了:完全安全的、无聊的、默认的跨平台衬线字体和无衬线字体堆栈。(由于篇幅限制,我不得不在标题中缩写它的全名。)

谢谢阅读。我希望你学到了新的东西!yabo亚博体育下载按照博客所以你不会错过这个迷你系列的下一部分!接下来,我将讨论:跨平台单空间和编码字体堆栈。

相关阅读