CSS变量定义类元组值方法及字体失效问题修复

问题根源 #

你用了val()函数来设置--font-family变量，但这个函数是CSS里专门用来获取输入框、下拉选这类表单控件当前值的，根本不能用来定义静态的字体族列表，浏览器解析不了这种写法，自然字体就不生效了。

正确写法 #

直接把字体族列表当成普通字符串赋值给CSS变量就行，完全不用加val()：

1. 全局默认字体设置

:root {
  /* 字体名带空格的话加引号，不带可以不加 */
  --font-family: 'Roboto', sans-serif;
}

2. 按语言切换字体

如果要根据页面的lang属性切换不同语言的字体，直接给对应选择器的变量赋值：

/* 默认给英文/西文用的字体 */
:root {
  --font-family: 'Roboto', sans-serif;
}

/* 中文页面切换成中文字体 */
[lang="zh-CN"] {
  --font-family: 'Noto Sans SC', sans-serif;
}

/* 把变量应用到页面元素上 */
body {
  font-family: var(--font-family);
}

额外提醒 #

• 要是字体名里有空格或者特殊字符，记得用单引号或双引号包起来；单字的字体名（比如Arial）可以直接写不用引号。
• 确认你在HTML头部加载的Google Fonts链接里，已经包含了你要用的字体，比如同时加载Roboto和Noto Sans SC的话，链接大概是这样的：

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto&family=Noto+Sans+SC:wght@400;500&display=swap">

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