@font-face中font-variation-settings不生效，如何全局设置Material Symbols图标填充？

问题根源 #

@font-face规则中定义的font-variation-settings不会自动传递给使用该字体的元素，所以直接加在@font-face里无效。仅给.material-symbols-outlined类设置属性时，只有带这个类的元素会生效，伪类生成的图标（比如::before/::after）因为没继承到该属性，所以无法显示填充状态。

可行解决方案 #

方案1：全局匹配所有使用该字体的元素 #

直接针对所有应用了Material Symbols Outlined字体的元素（包括伪元素）设置属性，覆盖类和伪类两种场景：

/* 匹配带类的元素和所有伪元素 */
.material-symbols-outlined,
*::before,
*::after {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

如果伪元素只在特定父元素上使用，也可以更精准地匹配：

.material-symbols-outlined,
.icon-parent::before,
.icon-parent::after {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

方案2：用CSS变量统一控制 #

先定义全局变量，再在需要的地方引用，方便后续统一调整：

:root {
  --material-icon-fill: 'FILL' 1;
  --material-icon-weight: 'wght' 400;
  --material-icon-gradient: 'GRAD' 0;
  --material-icon-size: 'opsz' 24;
}

.material-symbols-outlined {
  font-variation-settings: var(--material-icon-fill), var(--material-icon-weight), var(--material-icon-gradient), var(--material-icon-size);
}

/* 给所有伪元素应用变量 */
*::before,
*::after {
  font-variation-settings: var(--material-icon-fill), var(--material-icon-weight), var(--material-icon-gradient), var(--material-icon-size);
}

方案3：让伪元素继承父属性 #

如果伪元素是附加在.material-symbols-outlined类的元素上，可让伪元素直接继承父元素的字体变体设置：

.material-symbols-outlined {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.material-symbols-outlined::before,
.material-symbols-outlined::after {
  inherit: font-variation-settings;
}

注意事项 #

• 伪元素默认不会继承父元素的font-variation-settings，必须显式设置继承或直接赋值
• 确认伪元素确实指定了Material Symbols Outlined作为字体，否则属性设置无效

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