如何为 CSS 中的单个字体设置不同的大小？答案

【问题标题】：How to set different sizes for individual fonts in CSS?如何为 CSS 中的单个字体设置不同的大小？
【发布时间】：2021-03-11 16:47:56
【问题描述】：

我有一个 wabpage (HTML)，它使用在级联样式表中使用 @font-face{} 加载的不同 ttf 字体。但是，我发现其中一种字体比其他字体小。我在同一页面中加载了 Katex 以呈现数学。

我面临的问题是，由于我不知道如何为每种字体设置合适的大小，所以当我为使用font A 和b 的元素设置特定的字体大小a 时对于我使用font B 的元素，字体也会影响数学方程式的 Katex 渲染。因此，如果默认情况下字体 A 非常小，我需要覆盖默认字体大小并使其更大以使其看起来不错，但是较大的字体会影响由 Katex 渲染的数学方程并使它们变得特别大！

所以我的问题是：

如何在@font-face{} 本身中为不同字体设置不同的大小，以便使用特定字体不会影响其他元素和 JS 渲染器（如 Katex）。 我想要类似的东西：

@font-face {
font-family:myFamily;
src:url(locationOfTtfFont);
font-size:medium;
}
@font-face {
font-family:myFont2;
src:url(locationOfTtf2);
font-size:larger;
}

但是，我无法让上述工作。另外，查看Font Face Rule @w3schools.com，我发现字体大小不在允许的描述符列表中。尽管如此，在同一篇 W3 Schools 文章中，我发现了另一个字体描述符：font-stretch，但这也没有用。

【问题讨论】：

字体大小应定义为元素。在@font-face 中使用它不会产生任何效果。
您是否真的想要更改字体 a 和 b 呈现的大小，或者您想要确保无论周围的文本字体大小如何，Katex 的字体大小都是一致且可读的?
他们中的任何一个都会做@AHaworth。我想要的是所有字体都是可读的并且以相同的大小显示。但默认情况下，我的一些需求很小，而另一些则很大，因此较小的需求很难阅读。我想单独设置大小，而不影响文本之间的 Katex 公式的大小。

标签： html css font-face font-size katex

【解决方案1】：

Katex 使用 1.2xem 的默认字体大小，其中 em 是周围文本字体的 em 大小。即它渲染得稍微大一点，以帮助使 sub 和 superscripts 更具可读性。

问题中的问题是，因此方程的字体大小会随着使用的各种字体而变化，其中一种字体自然会比另一种字体更小，因此需要增加其大小 - 从而使方程太大。

可以通过在文档头部包含字体大小设置来固定 Katex 字体大小，使其独立于周围文本的大小。

这当然可能会导致不同的问题，例如，如果需要在脚注中包含小得多的 Katex，所以我不确定它是否是该问题的完整答案。这是 sn-p，以防代码对尝试不同的设置很有用。

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.css" integrity="sha384-AfEj0r4/OFrOo5t7NnNe46zW/tFgW6x/bCJG8FqQCEo3+Aro6EYUG4+cU+KJWu/X" crossorigin="anonymous">
    <script defer src="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.js" integrity="sha384-g7c+Jr9ZivxKLnZTDUhnkOnsh30B4H0rpLUpJ4jAIKs4fnJI+sEnkvrMWph2EDg4" crossorigin="anonymous"></script>
    <script defer src="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/contrib/auto-render.min.js" integrity="sha384-mll67QQFJfxn0IYznZYonOWZ644AWYC+Pt2cHqMaRhXVrursRwvLnLaebdGIlYNa" crossorigin="anonymous"
        onload="renderMathInElement(document.body);"></script>
  <style>
  .katex {
    font-size: 20px;
  }
  
  p {
  margin: 20px;
  }
  </style>
  </head>
  <body>

  <div style="text-align:center;font-size: 20px;">
  The equations' font-size has been set by including:<br><p style="text-align:center">&lt;style&gt;
  .katex {
    font-size: 20px;
  }
  &lt;/style&gt;</p> in the head of the document after everything else.
  
    <br>-------------------
  
    <p style="font-size: 20px;">
      This text has font-size: 20px and here is the equation 
      <div id="eqn1" style="text-align: center;"></div>
    </p>
    -------------------
    <p style="font-size: 16px;">
      This text has font-size: 16px but the equation size is the same as above
      <div id="eqn2" style="text-align: center;"></div>
    </p>
  </div>

  <script>

  function start() {
    katex.render("c = \\pm\\sqrt{a^2 + b^2}", document.getElementById("eqn1"), {
    throwOnError: false
    });
  
    katex.render("c = \\pm\\sqrt{a^2 + b^2}", document.getElementById("eqn2"), {
    throwOnError: false
    });
  }
  window.onload=start;
  </script> 
  </body>
</html>

【讨论】：