Chrome中style.fontFamily对条码字体失效但className可行的原因及需求

原因分析 #

当字体名称包含空格时，直接通过style.fontFamily赋值的字符串不符合CSS语法要求：

• 在CSS规则中，带空格的字体名称必须用单引号或双引号包裹，才能被浏览器正确识别。
• 你当前的JS代码直接将字体名'BC C39 3 to 1 Medium'赋值给style.fontFamily，没有添加必要的引号，浏览器无法解析这个带空格的字体名称。
• 而通过className引用CSS类时，类定义里的font-family: 'BC C39 3 to 1 Medium'已经正确添加了引号，所以字体能正常生效。

解决方法 #

在JS中设置style.fontFamily时，需要给带空格的字体名称外层添加引号，同时注意和JS字符串的引号区分开，以下几种写法都有效：

// 用双引号包裹字体名，JS字符串使用单引号
document.getElementById('spn').style.fontFamily = '"BC C39 3 to 1 Medium"';

// 用单引号包裹字体名，JS字符串使用双引号
document.getElementById('spn').style.fontFamily = "'BC C39 3 to 1 Medium'";

// 转义单引号，JS字符串使用单引号
document.getElementById('spn').style.fontFamily = '\'BC C39 3 to 1 Medium\'';

这样设置后，浏览器会正确解析字体名称，达到和使用className相同的效果。

内容的提问来源于stack exchange，提问作者Svein Ola Sjovold