Pretendard JP 可变字体子集使用中的字体家族名称问题解析

在使用 Pretendard 项目的 Pretendard JP 可变字体动态子集时，开发者可能会遇到一个关键问题：当设置 font-family 为 'Pretendard JP Variable' 时，虽然拉丁字符显示正常，但韩文字符却无法正确渲染。而将 font-family 改为 'Pretendard JP' 后，所有字符都能正常显示。

问题重现与测试环境

在 Windows 11 Pro 23H2 系统下，通过 Chrome 122.0 和 Firefox 123.0 浏览器测试发现：

1. 使用 'Pretendard JP Variable' 作为字体家族名称时，韩文字符会回退到系统默认字体
2. 使用 'Pretendard JP' 作为字体家族名称时，所有字符都能正确显示

测试使用了以下 CSS 导入方式：

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-jp-dynamic-subset.min.css");

技术背景分析

Pretendard JP 是 Pretendard 字体的日文版本，其子集版本主要针对日文字符进行了优化。值得注意的是：

1. 子集版本特性：

   • 动态子集版本为了控制文件大小，通常会移除对某些语言字符集的支持
   • 在 Pretendard JP 的子集版本中，韩文字符支持可能被有意移除

2. 字体家族命名差异：

   • 'Pretendard JP Variable' 是可变字体版本的命名
   • 'Pretendard JP' 是标准版本的命名
   • 两种命名可能对应着不同的字符集支持策略

解决方案建议

对于需要同时支持日文和韩文的项目，建议采用以下方案之一：

1. 使用完整版字体：

   • 避免使用子集版本，改用完整版的 Pretendard Variable 字体
   • 完整版通常包含更全面的字符支持

2. 组合使用字体：

   /* 同时加载标准版和日文版 */
   @import url("标准版URL");
   @import url("日文版URL");
   
   body {
       font-family: 'Pretendard', 'Pretendard JP', sans-serif;
   }
   

   这种方案可以确保：

   • 优先使用标准版显示韩文字符
   • 当日文内容出现时自动回退到日文版

3. 明确指定字体堆栈：

   body {
       font-family: 'Pretendard JP', sans-serif;
   }
   

   这种方案简单直接，但可能无法利用可变字体的所有特性

最佳实践建议

1. 在项目初期明确字符支持需求
2. 对于多语言项目，优先考虑使用完整版字体
3. 在测试阶段全面检查所有需要支持的字符集
4. 考虑使用字体特性检测技术来优化加载策略

通过理解字体子集的特性和命名约定，开发者可以更有效地解决跨语言字体渲染问题，确保项目中的文本内容能够正确显示。