CSSStyleDeclaration.cssText赋值Helvetica Neue时Chrome引号问题求助

我之前也碰到过Chrome这个烦人的小问题！当你给cssText赋值带空格的字体名时，Chrome会自动给它套上双引号——虽然这符合CSS语法规范，但确实会搞乱富文本编辑器的源码显示（转成HTML实体"Helvetica Neue"），而IE和Firefox在这方面处理更宽松，能保留你原本的写法。下面给你几个实用的解决办法：

方案1：拆分属性单独设置，避开cssText批量赋值 #

直接给style对象的单个属性赋值，Chrome不会主动给字体名加引号：

function myFunction() {
  var body = document.body;
  var style = body.style;
  // 分开设置每个样式属性，而非一次性赋值cssText
  style.fontSize = "small";
  style.fontFamily = "Helvetica Neue";
  return style.cssText.toString();
}

这样返回的cssText里，font-family会保留Helvetica Neue的原始写法，没有引号。

方案2：手动替换cssText中的引号 #

如果业务上必须用cssText批量赋值，可以在返回结果前手动去掉引号：

function myFunction() {
  var body = document.body;
  var style = body.style;
  style.cssText = "font-size:small;font-family:Helvetica Neue";
  // 用正则匹配并移除font-family值的双引号
  return style.cssText.toString().replace(/font-family: "([^"]+)"/g, 'font-family: $1');
}

这个正则会精准匹配带引号的font-family值，把引号去掉只保留字体名，就算有多个带空格的字体名也能处理。

方案3：使用标准CSSOM方法setProperty #

用setPropertyAPI来设置样式属性，同样能避免自动加引号，而且更符合标准用法：

function myFunction() {
  var body = document.body;
  var style = body.style;
  style.setProperty("font-size", "small");
  style.setProperty("font-family", "Helvetica Neue");
  return style.cssText.toString();
}

这种方法兼容性很好，几乎所有现代浏览器都支持。

最后提一句：其实从CSS语法来说，带空格的字体名加引号是合规且推荐的写法，但如果业务需求必须保留无引号的格式，上面的方案都能帮你解决问题。

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