为何CSS变量指定的字体缺失时，font-family未回退至默认字体？

问题场景 #

我们用ShadowDOM开发页面，在:host中定义了默认字体font-family: Arial, Helvetica，同时通过全局:root注入的CSS变量--myFontFamily传入一个未在站点引入的自定义字体CustomFontButNotOnTheSitePage。当给.my-content元素设置font-family: var(--myFontFamily)后，这个自定义字体不可用时，浏览器没有回退到:host定义的Arial/Helvetica，而是使用了用户代理（user-agent）的默认字体，不符合预期。

问题示例代码：

<style type="text/css" class="custom-site-style" id="custom-site-styles">
    :root {
      --myFontFamily: CustomFontButNotOnTheSitePage;
    }
</style>

<div>
  <!-- ShadowRoot 在这里 -->
  <style>
    :host {
      font-family: Arial, Helvetica;
    }

    .my-content {
      font-family: var(--myFontFamily);
    }
  </style>

  <div> Font Family is Arial as expected </div>
  <div class="my-content">  User Agent font-family is used.  Expectation is for font family to default to Arial because the css variable is defined but the font does not exist on the site page.  We have a defined font-family that is inherited by other elements.
  </div>
</div>

原因解析 #

这是CSS字体回退机制和样式继承的特性导致的：

• 当你给.my-content显式设置font-family属性时，这个值会直接覆盖它从:host继承来的字体设置，继承关系被阻断。
• CSS变量--myFontFamily的取值是一个不存在的字体，浏览器会尝试回退，但font-family的回退逻辑只针对当前属性值里列出的备选字体，不会自动去查找父元素的继承值。
• 因为你只给.my-content的font-family指定了var(--myFontFamily)这一个选项，没有额外的备选字体，所以当该字体不可用时，浏览器只能 fallback 到用户代理的默认字体，而不是:host的字体。

可行解决方法 #

把:host的默认字体存入另一个CSS变量，然后在.my-content的font-family中把这个变量作为备选字体：

<div>
  <style>
    :host {
      --defaultFontFamily: Arial, Helvetica;
      font-family: Arial, Helvetica;
    }

    .my-content {
      font-family: var(--myFontFamily), var(--defaultFontFamily);
    }
  </style>
</div>

这样当--myFontFamily对应的字体不可用时，浏览器会自动使用--defaultFontFamily里的Arial/Helvetica，符合预期。

完整可运行示例 #

<html>
    <head>
        <style>
            body {
                font-family: 'Times New Roman';
            }
        </style>
        <style type="text/css" class="custom-site-style" id="custom-site-styles">
            :root {
              --myFontFamily: CustomFontButNotOnTheSitePage;
            }
          </style>
    </head>

    <body>
        <div class="inject-here">

        </div>
    </body>
    <script type="text/javascript">
        (function () {// mimics proprietary production code
            const content = document.querySelector('.inject-here');
            if (!content.shadowRoot) {
                const shadow = content.attachShadow({ mode: 'open' });
                
                // 问题示例代码（可取消注释测试）
                // const hostStyles = `
                //     :host {
                //         font-family: Arial, Helvetica;
                //         /*验证:host样式生效*/
                //         color: blue; 
                //         font-weight: 500;
                //     }

                //     .my-content {
                //         font-family: var(--myFontFamily);
                //         color: black; /*验证样式级联生效*/
                //     }`;

                // 修复后的代码
                const hostStyles = `
                    :host {
                        --myDefaultFontFamily: Arial, Helvetica;
                        font-family: var(--myDefaultFontFamily);
                        /*验证:host样式生效*/
                        color: blue; 
                        font-weight: 500;
                    }

                    .my-content {
                        font-family: var(--myFontFamily), var(--myDefaultFontFamily);
                        color: black; /*验证样式级联生效*/
                    }`;

                shadow.innerHTML = `<style>
                    ${hostStyles}
                </style>
                <div> Content font-family will be Arial or Helvetica</div>
                <div class="my-content">User Agent font-family will be used here.  Expected that the :host font-family would be used</div>`;
            }
        }());
    </script>
</html>

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