Firefox 不显示可变字体-解网

问：

我正在调整 Hugo 静态站点的主题，并重新调整块的用途，以便于文本突出显示。这涉及在 css 中重新设置元素样式：<code><code>

.markdown code {
  font-family:'Public sans','sans serif';
  padding: 7px 4px 4px 7px;
  background:var(--highlight);
}

这在基于 Chrome 的浏览器中工作得很好。不过，我个人在 Ubuntu 22.04 上使用最新的 Firefox，我得到了这个结果：

文本呈现为 Public Sans（自托管可变字体，尽管我也安装了它以在我的桌面环境中使用，这可能就是它在大多数文本中正确显示的原因），但 FF 将文本呈现为后备无衬线。FF 调试控制台中提到的错误说：我是在我的本地主机 hugo 服务器上测试还是在我的域上查看已发布的站点，都没有区别。<p><code>downloadable font: no supported format found (font-family: "public sans" style:normal weight:100..900 stretch:100 src index:2) source: (end of source list)

以下是我在 css 中包含自托管字体的方法：

@font-face {
  font-family: 'Public sans';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: local(''),url('fonts/PublicSans-Italic-VariableFont_wght.ttf') format('ttf supports variations');
  src: local(''),url('fonts/PublicSans-Italic-VariableFont_wght.ttf') format('ttf-variations');
  }

@font-face {
  font-family: 'Public sans';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: local(''),url('fonts/PublicSans-VariableFont_wght.ttf') format('ttf supports variations');
  src: local(''),url('fonts/PublicSans-VariableFont_wght.ttf') format('ttf-variations');
}

我在调试控制台中摆弄了一下，发现 FF 只显示 400 和 700 权重的 Public Sans——500 及以下渲染为 400 权重，600 及以上渲染为 700，进一步证明它没有加载可变字体。（注意：我在本地桌面环境中安装了所有权重的 Public sans，所以这是另一个难题。

如果我使用 Google 托管的字体版本，它可以正常加载：

@import url('https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

同样，自托管变量字体在所有其他浏览器中都运行良好。谁能看到这里出了什么问题？我可以只使用 Google 托管的字体，但我原则上宁愿不使用。

CSS Firefox 可变字体

@font-face {
  font-family: 'Public sans';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('https://fonts.gstatic.com/s/publicsans/v15/ijwRs572Xtc6ZYQws9YVwkNBdp_yw_k0.ttf') format('truetype');
}

body {
  font-family: 'Public sans';
  font-size: 20vmin;
  line-height:1rem;
  font-weight: 900;
}

<p style="font-family:sans-serif; font-size:12px">Font-weight: <br><input type="range" id="fontWeight" value="100" min="100" max="900" step="1"></p>
<p>Hamburgefons</p>

顺便说一句。将返回静态字体的规则。https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap@font-face

要检索变量字体，您需要使用范围选择器语法，如下所示：..

https://fonts.googleapis.com/css2?family=Public+Sans:[email protected]

另请参阅：“将可变字体子集以仅包含所需轴”

Firefox 不显示可变字体

Firefox not displaying variable font face

评论

评论