在 CSS 中缩放一个字体

Question

我正在为一本正在印刷的书写一个小网站，我想匹配它用于标题的名为 Cronos Pro 的稍微古怪的字体。我目前正在使用以下 CSS:

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

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

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

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

但是，Cronos Pro 是一种非常紧凑的字体。如果我知道浏览器正在使用它，我希望它渲染得更大，就像我将 font-size: 125% 添加到 CSS 一样。但是如果浏览器回退到默认的无衬线字体，我希望它的大小为 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>

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

在 CSS 中缩放一个字体

Scaling one font face in CSS

css

fonts

webfonts