为什么字形的显示取决于浏览器？答案

【问题标题】：Why does the display of a glyph depends on the browser?为什么字形的显示取决于浏览器？
【发布时间】：2020-02-28 21:06:33
【问题描述】：

上下文

我编写了一个家庭仪表板，除其他外，它提供了下一小时下雨可能性的视觉指示。如果预计下雨，？？？显示符号（使用Open Sans），否则使用filter: opacity(10%); 设置样式。

在代码（HTML、CSS、Vue.js）方面，通过

显示

<span class="drop" :class="isDrop(horaires.first.rain, 2)">????</span>

动态类的计算方法

isDrop(rain, level) {
  return rain >= level ? "full" : "empty"
}

而empty 的类是

.empty {
  filter: opacity(10%);
}

（尚未定义类full）

问题

在我的开发环境（Windows 10、Chrome 或 Firefox）上，水滴看起来明显不同

以及实际的仪表板（Raspberry Pi 与 Debian、Firefox）

这种差异可能来自哪里？

两种情况下页面的来源相同
页面上使用的字体是通过@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800');显式加载的
不仅过滤后的版本不同（在一种情况下可见，在另一种情况下不可见），而且即使是无样式的 drop 看起来也不同 - 尽管使用相同的字体呈现。

【问题讨论】：

标签： html css fonts webfonts

【解决方案1】：

每个浏览器都有自己的一组表情符号。 you can see diffrent emoji set here.
如果您希望在每个浏览器中以相同的方式显示图标，您应该创建一个图标集并使用 svg。

【讨论】：

【解决方案2】：

这是因为您使用的字体 (Google Open Sans) 不包含所有 unicode 字形，更重要的是，它不包含表情符号。

因此，当浏览器遇到这些字形时，它会回退到系统上可用的一个，并且不同的浏览器可能使用不同的顺序来选择要使用的字体，并且即使在同一台电脑。但是，您几乎可以肯定不同的操作系统会有不同的字体，因此这些字形的呈现方式也会不同。大多数现代浏览器的开发工具允许您验证正在使用的字体，检查它以确保在您的系统上切换了哪个字体。

解决方案是使用包含这些字形的网络字体。

Google 有一个 Noto 字体，它只处理表情符号，Noto Emoji，但只有这些表情符号字形的彩色版本是 8MB！。这么说是为了让您明白将这些字形包含在任何网络字体中都不是一件容易的事。
似乎还有其他网络字体，但我能看到的所有免费字体都是单色的，所以这里我将使用谷歌的一个作为示例。

@font-face {
  font-family: "NotoEmoji-Regular";
  src: url("https://cdn.jsdelivr.net/gh/googlefonts/noto-emoji/fonts/NotoEmoji-Regular.ttf") format("truetype");
}
body {
  font-family: "NotoEmoji-Regular";
}

如果您只有一小部分要使用的这些表情符号，您可能会制作出 Google 的一种或其他开放字体的分叉，这样它就只包含您需要的那些（并且更轻）。
或者，如果您有一位优秀的设计师，您可以制作自己的表情符号集并使用icomoon et al. 之类的服务根据 svg 图形制作自己的字体。

【讨论】：