纯数字命名FontFace无法解析的原因及无前缀解决方案问询

为什么纯数字字体名会失效？ #

CSS标识符（包括自定义属性名、字体族名）有严格的语法规则：不能以数字开头，也不能是纯数字字符串。你的font.newFileName是纯数字，直接用在FontFace构造函数的字体族名参数、或是CSS自定义属性值里时，会被解析成无效的标识符，导致字体加载和样式应用失败。加字母前缀后，字符串符合了标识符“以字母开头”的要求，所以能正常工作。

不用加前缀的解决方法 #

有两种直接用纯数字原值的方式：

1. 给FontFace的字体族名加引号 #

修改FontFace的第一个参数，把纯数字字符串用单引号或双引号包裹，让它变成合法的带引号字体族名：

const ff = new FontFace(`'${font.newFileName}'`, `url('${font.newFilePath.replace(/\\/g, '/')}')`);

这样浏览器就能正确识别这个纯数字的字体族名了。

2. 设置CSS样式时给字体名加引号 #

不管是用自定义属性还是直接设置fontFamily，都把纯数字字体名用引号包裹：

• 用自定义属性的写法：

fontNameElement.style.setProperty('--font-family', `'${font.newFileName}'`);
fontNameElement.style.fontFamily = 'var(--font-family)';

• 直接设置fontFamily的写法：

fontNameElement.style.fontFamily = `'${font.newFileName}'`;

这样CSS就能正确识别这个纯数字的字体族名，无需额外加字母前缀。

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