请问以双连字符开头的这些CSS属性具体是什么？
2026-5-20
CSS自定义属性（CSS变量）详解
嘿，你发现的这些以--开头的属性是CSS自定义属性，也常被大家叫做CSS变量，是CSS3标准里加入的核心功能之一，专门用来解决样式复用和统一管理的痛点。
为什么用:root定义？
你看到的代码是在:root选择器里声明这些变量的，:root是一个伪类选择器，它匹配的是文档的根元素（在HTML里就是<html>标签），在这里定义的自定义属性是全局作用域的，整个页面的所有元素都能访问和使用这些变量。
怎么使用这些变量？
定义好变量之后，你可以用var()函数来引用它们，比如如果要使用那个基础字体家族，写法就是：
body { font-family: var(--font-family); font-weight: var(--font-weight); }
如果担心变量未定义导致样式失效，还可以给var()函数加一个 fallback 备选值：
h1 { font-size: var(--font-size-xxx-display, 6rem); }
这些变量能做什么？
从你贴的代码片段来看，Andy Clarke用它来统一管理全站的字体系统：
- 把不同字重的字体家族单独定义成变量，方便在不同场景切换（比如标题用粗体字体变量，正文用常规的）
- 把不同层级的字体大小做成变量，尤其是像
--font-size-xxx-display: 8vmin这种用相对单位的变量，能轻松实现响应式的字体效果，不用写一堆媒体查询来逐个调整字体大小
这种方式最大的好处就是维护成本极低——如果哪天要换全站的基础字体，只需要修改:root里的--font-family变量值就行，不用在CSS文件里到处找对应的font-family属性去替换，效率超高。
内容的提问来源于stack exchange，提问作者Ky -
