时间戳

首页 > 解决方案 > 在 CSS 中缩放一种字体

css - 在 CSS 中缩放一种字体

问题描述

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

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

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

<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考虑到规则不在我的控制范围内，是否有实现此目的的好方法？

标签： cssfontswebfonts

解决方案

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

<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 开发还是有点陌生​​。

推荐阅读