在 CSS 中缩放一种字体

Question

我正在为目前正在印刷的一本书编写一个小型网站，并希望匹配它用于其标题的名为 Cronos Pro 的略微古怪的字体。我目前正在使用以下 CSS 执行此操作：

header, h1, h2, h3 {
   font-family: cronos-pro, sans-serif;
}

Cronos Pro 是使用我们的 Adob​​e Creative Cloud 订阅提供的，根据their licence 的条款，它必须按如下方式加载：

<link rel="stylesheet" href="https://use.typekit.net/xxxxxxx.css"/>

这只会产生一组定义字体的@font-face 规则，并且一切正常。尽管如此，我觉得我应该保留sans-serif 的后备，以防字体暂时不可用，或者对于不支持它的旧浏览器。

但是，Cronos Pro 是一种非常紧凑的字体。如果我知道浏览器正在使用它，我希望它渲染得更大，就好像我在 CSS 中添加了font-size: 125%。但是如果浏览器回退到它的默认无衬线字体，我希望它是 100% 大小。

我想我可以这样做，但 Firefox 告诉我这是一个无效的属性值：

font: cronos-pro 125%, sans-serif;

记住@font-face 规则不在我的控制范围内，是否有实现此目的的好方法？

Answer 1

如果 Chronos Pro 成功加载，您可以使用 JavaScript 添加带有 font-size: 125% 标签的样式表：

<script>
    {
        let font = "cronos-pro";
        
        let styleSheet = document.createElement('style');
        document.head.appendChild(styleSheet);

        document.fonts.ready.then(function () {
            if( document.fonts.check(`1em ${font}`) ){
                styleSheet.sheet.insertRule('header, h1, h2, h3 { font-size: 125%; }')
            }
        });
    }
</script>

不确定这是否是一种“好方法”，但它应该在紧要关头起作用。我对 Web 开发还是有点陌生​​。