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

Question

上下文

我写了一个家庭仪表板，除其他外，它提供了下一个小时下雨可能性的视觉指示。如果预计会下雨，则会显示 💧 符号(使用 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)上，水滴看起来明显不同

和实际的仪表板(带有 Debian、Firefox 的 Raspberry Pi)

这种差异可能来自哪里？

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

Answer 1

那是因为您使用的字体 (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 图形制作自己的字体。