为什么 Opera 显示 Google 的 Material Symbols Outlined（图标字体）不正确，如何修复？

我正在建立一个网站，我想使用谷歌的材料符号（图标字体）“概述” https://fonts.google.com/icons.

我已将该代码添加到我的标题中：

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected] /cdn-cgi/l/email-protection,100..700,0..1,-50..200" rel="stylesheet" />

请注意，它们具有“FILL”属性，可以使它们填充或不填充。我正在使用此 CSS 的未填充变体：

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48;
}
.material-icons-outlined.md-36 {
    font-size: 36px;
}
.material-symbols-outlined.mdopsz-40 {
    font-variation-settings: 'opsz' 40;
}
.material-symbols-outlined.mdwght-6 {
    font-variation-settings: 'wght' 600;
}
.my-material-icon {
    display: inline;
    vertical-align: middle;
}

像使用它们一样

<span class="material-symbols-outlined md-36 mdopsz-40 mdwght-6 my-material-icon">favorite</span>

Chrome 和 Firefox 中一切正常，甚至 Edge 也不例外。但 OPERA 由于某种神奇的原因显示了填充的变体。

（显然是在运行相同代码的同时比较它们:-)所有浏览器都是最新的，尤其是 Opera，在 Opera 85 和 89 上进行了测试）

我现在正在寻求建议，如果我做错了什么，或者 Opera 在这方面是否有问题。我认为图标字体被广泛使用并且得到了很好的支持，但我读过一些文章，认为它们的时代已经过去了。如果这一直是一个痛苦，我正在考虑使用 d/l 并使用 SVG。另外，当然还有来自谷歌的材质图标，它们没有这些花哨的“字体变化设置”，但为什么符号甚至存在呢？我希望谷歌有这样的功能。

[编辑] 解决方案是将 google API 中的 font-face CSS 直接复制到网站 CSS 中：

/* fallback */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 100 700;
  src: url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v39/kJEhBvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oFsI.woff2) format('woff2');
}

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

https://localhost:7058/de-DE/自动登录

Google 将根据检测到的用户代理/浏览器返回不同的 CSS 规则。

在firefox和opera中打开css：
https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[电子邮件受保护],100..700,0..1,-50..200 https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200

尽管 Opera 支持可变字体和大多数字体功能，但您将获得引用静态单粗细字体文件的 CSS。
所以这是谷歌浏览器检测查找中的一个错误。

将 css 规则复制到 chrome/firefox 并将它们复制到您的样式表中，如下所示：

/* fallback */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 100 700;
  src: url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v39/kJEhBvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oFsI.woff2) format('woff2');
}

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -moz-font-feature-settings: 'liga';
  -moz-osx-font-smoothing: grayscale;
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48;
}
.material-icons-outlined.md-36 {
    font-size: 36px;
}
.material-symbols-outlined.mdopsz-40 {
    font-variation-settings: 'opsz' 40;
}
.material-symbols-outlined.mdwght-6 {
    font-variation-settings: 'wght' 600;
}
.my-material-icon {
    display: inline;
    vertical-align: middle;
}

<span class="material-symbols-outlined md-36 mdopsz-40 mdwght-6 my-material-icon">favorite</span>