Chrome/MacOS 和 Firefox/MacOS 能够使用两种字体的字形呈现字符串，但 Chrome/iOS 和 Safari/Any 则不能

问题描述 投票：0回答：1

我想声明一个 font-family 属性来命名两种字体，并且第一个字体中不存在的任何字形都会在第二个字体中呈现。这在 MacOS 上的 Chrome 和 Firefox 中效果很好，但 Safari/MacOS 以及 iOS 上的 Chrome 和 Safari 只会尊重第一个列出的字体。

最小重现案例：

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Example</title>
        <meta charset="utf-8">
        <link href="https://fonts.googleapis.com/css2?family=Redacted+Script&family=Noto+Emoji&display=swap" rel="stylesheet">
        <style>
            p {
                font-family: "Redacted Script", "Noto Emoji", sans-serif;
                font-weight: 400;
                font-style: normal;
            }
        </style>
    </head>
    <body>
        <p>Hello 😊</p>
    </body>
</html>

这里的 😊 笑脸应该以 Noto 表情符号呈现，而不是浏览器的默认表情符号字体。这就是 Chrome/MacOS 和 Firefox/MacOS 所做的。

这就是我所期望的：

Rendering in Firefox

但在糟糕的情况下，我会得到这个（我认为笑脸来自Apple Emoji字体）：

Rendering in Safari

我做错了什么？或者所有浏览器都不支持在单个字符串中混合字体？有解决办法吗？

css google-chrome fonts safari
1个回答
0
投票

在 Safari 中，如果您更改族的顺序，它就会起作用：

@import url('https://fonts.googleapis.com/css2?family=Noto+Emoji:[email protected]&family=Redacted+Script&display=swap');

.p1 {
  font-family: "Noto Emoji", "Redacted Script", cursive;
}

.p2 {
  font-family: "Redacted Script", "Noto Emoji", cursive;
}
<p class="p1">hello 😀😍👹🤡🤢</p>

<p class="p2">hello 😀😍👹🤡🤢</p>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.