如何加载单个Poppins字体文件同时显示ă和â字符？

问题背景 #

使用Poppins字体时，显示字符ă需要加载特定的woff2文件，显示â则需要另一个独立的woff2文件，必须加载两个文件才能让这两个字符都正常显示。

原因分析 #

Google Fonts会根据字符所属的语言子集拆分字体文件，ă属于带breve符号的拉丁扩展字符（常见于罗马尼亚语等），â属于带circumflex符号的拉丁字符（常见于法语、葡萄牙语等），二者被划分到不同的子集中，因此对应不同的字体文件。

解决方案 #

要实现单文件同时显示这两个字符，可通过以下两种方式获取包含目标字符的单一字体文件：

方式1：指定需要的具体字符 #

在请求Google Fonts时，通过text参数明确指定需要包含的字符，让服务生成仅包含这些字符的合并字体文件。示例代码：

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400&text=ăâ" rel="stylesheet">

方式2：加载完整的Latin扩展子集 #

如果需要支持更多欧洲语言的带重音字符，可直接指定加载latin-ext子集，该子集涵盖了包括ă和â在内的大部分扩展拉丁字符：

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400&subset=latin-ext" rel="stylesheet">

验证实现 #

使用上述任一方式后，单个字体文件即可同时渲染两个字符，示例样式与HTML：

h1 {
  font-family: 'Poppins', sans-serif;
  font-size: 46px;
}

<h1>ă â</h1>

内容的提问来源于stack exchange，提问作者Andrei