Css ChromeMacOS和FirefoxMacOS能够使用两种字体的字形渲染字符串，但ChromeiOS和SafariAny不能

发布于05月06日

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

最小再现 case :

<!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的功能.

这就是我所期望的:

但在糟糕的情况下，我会得到这个(我认为笑脸来自Apple子字体):

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

@import url('https://fonts.googleapis.com/css2?family=Noto+Emoji:wght@300..700&family=Redacted+Script&display=swap'); body { font-size: 2em; } .p1 { font-family: "Redacted Script", "Noto Emoji", cursive; } .p2 { font-family: "Noto Emoji", "Redacted Script", cursive; }

Css ChromeMacOS和FirefoxMacOS能够使用两种字体的字形渲染字符串，但ChromeiOS和SafariAny不能

推荐答案

Css相关问答推荐

将CSS更改为Mat-Form-Field，其中包含搜索框

如何将下拉面板放置在MAT-SELECT文本框的正下方

创建始终为剪辑元素的300%高度并左对齐的圆形剪辑路径

CSS 布局：使一列依赖于另一列

Angular Material - 将 matsnackbar 置于所有对话框之上

Tailwind CSS： Select 单选按钮时不应用同行判断的边框

如何更改导航栏标题中链接的文本 colored颜色和导航丸中的链接(在shiny 的应用程序中)？

如何在 konvajs 中居中放置项目？

Bootstrap 5 - 更改列顺序时出现问题

没有 colored颜色 Select 器的 JavaFX colored颜色 Select 器

我在 ins 标签中有一个 img 标签，更改 ins 格式覆盖图像的视图

Angular Datepicker - 更改日期范围 Select 样式

CSS如何防止键盘向上移动内容？

你如何调试可打印的 CSS？

Angular Material 中的样式垫 Select

中心表单提交按钮 HTML / CSS

在 IE9-10 中压缩 SVG 的背景大小

最大宽度与最小宽度

如何在 javascript 中获取 HTML 元素的样式值？

堆叠半透明盒子的 colored颜色取决于订单？