css - 在 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 是一种非常紧凑的字体。如果我知道浏览器正在使用它，我希望它渲染得更大，就好像我添加了 font-size: 125%到 CSS。但是如果浏览器回退到其默认的无衬线字体，我希望它的大小为 100%。
我以为我可以按如下方式执行此操作，但 Firefox 告诉我这是一个无效的属性值:

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

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

Answer 1

您可以使用 JavaScript 添加带有 font-size: 125% 的样式表。标记 Chronos Pro 是否以及何时成功加载:

<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>

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