font-family多字体Fallback渲染跨浏览器兼容问题求助

效果对比 #

• 预期效果（macOS Chrome/Firefox）：文本"Hello"使用Redacted Script字体，😊表情使用Noto Emoji字体渲染；
• 问题效果（macOS Safari/iOS Chrome/Safari）：😊表情显示为系统默认的Apple Emoji样式。

问题原因 #

这并非操作错误，而是WebKit内核浏览器（含macOS Safari、iOS Safari/iOS Chrome）的字体 fallback 逻辑差异导致。这类浏览器对emoji等彩色特殊字符有特殊处理：即便你在font-family中指定了后备字体，它们仍会优先调用系统内置的彩色字体（如Apple Color Emoji），而非你指定的Noto Emoji——哪怕第一个字体（Redacted Script）并不包含该emoji字形。

解决办法 #

通过@font-face结合unicode-range属性，精准指定每个字体负责渲染的字符范围，强制WebKit浏览器按预期分配字体：

修改后的代码示例 #

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Example</title>
        <meta charset="utf-8">
        <style>
            /* 自定义Redacted Script字体，负责常规非emoji字符 */
            @font-face {
                font-family: 'Redacted Script Custom';
                src: url('https://fonts.googleapis.com/css2?family=Redacted+Script&family=Noto+Emoji&display=swap');
                unicode-range: U+0020-007E, U+00A0-00FF, U+0100-017F, U+0180-024F;
                font-weight: 400;
                font-style: normal;
            }

            /* 自定义Noto Emoji字体，负责emoji字符 */
            @font-face {
                font-family: 'Noto Emoji Custom';
                src: url('https://fonts.googleapis.com/css2?family=Redacted+Script&family=Noto+Emoji&display=swap');
                unicode-range: U+1F600-1F64F, U+1F300-1F5FF, U+1F680-1F6FF, U+1F1E0-1F1FF, U+2600-26FF, U+2700-27BF;
                font-weight: 400;
                font-style: normal;
            }

            p {
                font-family: 'Redacted Script Custom', 'Noto Emoji Custom', sans-serif;
            }
        </style>
    </head>
    <body>
        <p>Hello 😊</p>
    </body>
</html>

原理说明 #

unicode-range属性会明确告知浏览器：仅当字符属于指定的Unicode区间时，才使用该字体渲染。通过这种方式，WebKit浏览器会按照规则将emoji字符分配给Noto Emoji渲染，常规字符则使用Redacted Script，从而实现预期的多字体混合渲染效果。

补充提示 #

若需要覆盖更全面的emoji范围，可以扩展unicode-range的值，加入U+1F900-1F9FF等新增emoji对应的Unicode区间；同时可添加font-display: swap属性优化字体未加载时的显示体验。

内容的提问来源于stack exchange，提问作者Thomas David Baker