如何在应用中同时使用FFShamelFamily的两个子字体？

核心原因 #

问题出在字体注册时未正确映射font-weight属性，导致系统无法将指定字重与对应的子字体关联，只会加载第一个注册的子字体。

具体实现方案 #

方案一：统一font-family并映射字重（推荐） #

通过明确的字重映射，让系统自动匹配对应子字体，以CSS为例：

/* 注册Book字重的字体 */
@font-face {
  font-family: 'FFShamelFamily';
  src: url('你的字体路径/SansOneBook.woff2') format('woff2'),
       url('你的字体路径/SansOneBook.woff') format('woff');
  font-weight: 400; /* 常规字重对应Book */
  font-style: normal;
}

/* 注册Bold字重的字体 */
@font-face {
  font-family: 'FFShamelFamily';
  src: url('你的字体路径/SansOneBold.woff2') format('woff2'),
       url('你的字体路径/SansOneBold.woff') format('woff');
  font-weight: 700; /* 粗体字重对应Bold */
  font-style: normal;
}

使用时：

• 正文文本：font-family: 'FFShamelFamily'; font-weight: 400;（400可省略，为默认值）
• 标题文本：font-family: 'FFShamelFamily'; font-weight: 700;

如果是React Native平台，配置完字体资源后，直接在样式中指定对应字重即可：

// 正文
<Text style={{ fontFamily: 'FFShamelFamily', fontWeight: '400' }}>正文内容</Text>
// 标题
<Text style={{ fontFamily: 'FFShamelFamily', fontWeight: '700' }}>标题内容</Text>

方案二：直接指定子字体（简单粗暴） #

如果字重映射始终不生效，可以跳过font-weight，直接给文本指定对应子字体名称：

• 正文文本：font-family: 'SansOneBook';
• 标题文本：font-family: 'SansOneBold';

额外注意事项 #

若方案一配置后仍无效，可能是字体文件本身的元数据缺少正确字重标识。可以用FontForge等字体编辑工具，修改字体“OS/2”面板中的“Weight Class”属性，将Book设为400、Bold设为700，再重新注册使用。

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