关于CSS中attr()与var()结合使用可行性的技术问询

嘿，我完全理解你想实现的效果——通过data-font属性动态引用CSS变量来设置字体，可惜你当前的写法确实行不通，Chrome报"Invalid property value"是有明确原因的。

咱们拆解下问题：attr(data-font)在CSS里的作用是提取元素属性的字符串值，这里它会返回"--font1"（带引号的字符串），而var()函数需要的是不带引号的变量名标识符。换句话说，你相当于在写var("--font1")，浏览器会把这个带引号的字符串当成一个不存在的变量名，自然就识别不了了。目前CSS还不支持把字符串动态转换成变量名，所以这种直接嵌套的写法暂时实现不了。

不过针对你的需求（尤其是想绕过<col>/<colgroup>不能设置font-family的限制），有两个可行的方案：

方案1：纯CSS批量匹配规则 #

如果你的字体变量数量不多，可以手动给每个data-font值写对应的规则：

:root {
  --font1: 'Courier New';
  --font2: 'Georgia';
}

/* 匹配每个data-font值，对应到变量 */
p[data-font="--font1"] {
  font-family: var(--font1);
}
p[data-font="--font2"] {
  font-family: var(--font2);
}

这种方法不用依赖JS，适合变量较少的场景，浏览器能直接识别规则并应用样式。

方案2：JavaScript辅助动态设置 #

如果变量数量多，不想写大量重复的CSS规则，用JS来处理会更高效。思路是读取元素的data-font属性值，然后直接把变量引用赋值给元素的样式：

// 遍历所有带data-font属性的元素
document.querySelectorAll('[data-font]').forEach(el => {
  const varName = el.getAttribute('data-font');
  // 把变量引用直接赋值给font-family
  el.style.fontFamily = `var(${varName})`;
});

针对你提到的<col>场景，因为<col>本身无法直接控制单元格的字体，我们可以扩展这个逻辑：找到<col>对应的列索引，然后给该列的所有单元格设置字体：

document.querySelectorAll('col[data-font]').forEach(col => {
  const varName = col.getAttribute('data-font');
  // 获取当前col在colgroup中的索引（从0开始）
  const colIndex = Array.from(col.parentElement.children).indexOf(col);
  // 给对应列的所有单元格设置字体
  document.querySelectorAll(`tr td:nth-child(${colIndex + 1}), tr th:nth-child(${colIndex + 1})`).forEach(cell => {
    cell.style.fontFamily = `var(${varName})`;
  });
});

这样就能通过<col>的data-font属性间接控制整列的字体了。

内容来源于stack exchange