如何使用 css 更改辅助字体的大小而不更改后备（主要）字体的大小？

Question

我正在尝试将一组特定的 h1 标题更改为与我为 h1 定义的普通字体不同的字体，因此我创建了一个类，将 h1 字体系列定义为该类的 Font2 - 但如果查看器不这样做没有该字体，它将默认返回 Font1，它要大得多。

我想使用大小调整使第一个字体（Font2）与后备字体（Font1）大小相同，但我不知道如何获得正确的宽高比，并且我没有尝试过任何命令已经工作了。

我尝试过的事情包括在自己的 @font-face 中定义 Font2 的大小，但是如果该字体不在本地计算机上（应该如此），我仍然遇到默认为 Font1 的问题，并且由于尺寸差异而变得巨大（我将默认的 h1 定义为 60px）。如何在 css 中分离它们的大小？是否需要为自定义字体制作 @font-face 并在那里定义它们的大小？那么H1不会否决它吗？而且我仍然遇到不知道长宽比差异是多少的问题。

作为参考，Font1 的 h1 大小为 60px（如 h1 中定义），要达到类似大小，Font2 的 h1 大小必须为 100px。

（到目前为止，我所做的是为我希望 h1 标记为 Font2 的区域创建一个类，并与 Font1 的大小相匹配，如果系统上没有 Font2，则不会使 Font1 太大，但我还没有'到目前为止还没有做任何成功的事情。）

@font-face {
        font-family: 'Font2', Times, serif;
        src: local('font2.ttf'), format('truetype');
        font-size-adjust: 200%;
}

.Arch-ch1 {
        h1 {
            font-family: 100px 'Font2', 'Font1', serif;
            text-align: center;
        }
    }

也尝试过这个但没有运气：

.Arch-ch1 {
    h1 {
        font-family: 'Font2', 'Font1', serif;
        text-align: center;
        @font-face {
            font-family: 'Font2', Times, serif;
            src: local('font2.ttf'), format('truetype');
            font-size-adjust: 2.0;
        }
    }
}

我最近的尝试：

.Arch-ch1 {
    h1 {
        font-family: 'Font2', 'Font1', Times, serif;
        text-align: center;
    }
    font-family:'Font2' {
        font-size: 100px;
    }
}

Answer 1

您有多个错误

@font-face

规则：

• local()

  需要 afont 系列名称，而不是字体文件的路径/URL
• 您宁愿需要

  size-adjust

  使用所需字体标准化后备字体大小（而不是

  font-size-adjust

  ）

这是一个例子：

//@import 'https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,100..900;1,100..900&display=swap';


@font-face {
  font-family: 'Font2';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v18/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuLyfAZ9hiA.woff2) format('woff2');
}


@font-face {
    font-family: "Fallback";
    font-style: normal;
    src: local(Arial);
    ascent-override: 90.199%;
    descent-override: 22.4836%;
    size-adjust: 107.4014%;
    font-weight: 100 900;
    font-display: swap;
}


body {
    font-family: "Font2", "Fallback", sans-serif;
    font-size:5em;
}


p{
  display:inline-block;
  outline: 1px solid #ccc;
  margin:0.3em;
}

h3{
  font-size: 1rem;
}

.fallback{
    font-family: "Fallback";
}

<h3>Ideal: Font2 is available</h3>
<p class="font2">Hamburgefonstiv</p>

<h3>Fallback: actually Arial</h3>
<p class="fallback">Hamburgefonstiv</p>

上面的示例值取自 Petro Prots 的问题：“为什么 @font-face with local() src 不起作用？” 他精心调整了“Arial”指标以匹配“Inter”的指标。根据实际的“Font2”，您需要找到自己的值。

坦白说，我建议无论如何都加载自定义字体，以确保字体显示一致。

• 某些浏览器可能会完全阻止本地字体。
• 本地候选方式不是最佳匹配（例如，如果仅安装了粗体/斜体版本

此外，请记住，并非所有设备操作系统都提供“网络安全字体”之类的东西。随着 Android 的兴起，这一点变得更加重要（通常不随 Windows 或 Apple 操作系统中包含的 Arial、Times、Verdana 等一起提供）

总而言之，如果您确实不想加载任何字体，最好使用“serif”、“sans-serif”或“monospace”等通用关键字。假设某种字体很流行，将不可避免地导致相当多的不一致。