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

Question

上下文

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

设置样式

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

显示

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

动态class由

计算

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

class empty 是

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

(class full尚未定义)

问题

在我的开发环境（Windows 10、Chrome 或 Firefox）中，掉落物看起来明显不同

和实际的仪表板（Raspberry Pi 使用 Debian、Firefox）

这种差异可能来自哪里？

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

Answer 1

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

Answer 2

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

所以当浏览器遇到这些字形时，它会回退到系统上可用的一个，不同的浏览器可能会使用不同的顺序来选择要使用的字体，你甚至可能使用不同的字体来表示相同的字形在同一台计算机上。但是，您几乎可以肯定不同的 OS 会有不同的字体，因此这些字形的渲染也不同。大多数现代浏览器的开发工具允许您验证正在使用的字体，检查它以确保在您的系统上切换了哪种字体。

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

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

@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 图形的字体。

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

Why does the display of a glyph depends on the browser?

html

css

fonts

webfonts

上下文

问题