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

Question

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

我面临的问题是，由于我不知道如何为每种字体设置合适的大小，当我为我使用 [=14= 的元素设置特定的字体大小 a 时]，以及 b 对于我使用 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，我发现 font-size 不在允许的描述符列表中。尽管如此，在同一篇 W3 Schools 文章中，我发现了另一个字体描述符：font-stretch，但这也不起作用。

Answer 1

Katex 使用默认字体大小 1.2xem，其中 em 是周围文本字体的 em 大小。也就是说，它呈现得稍微大一点，以帮助使下标和上标更具可读性。

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

可以修复 Katex 字体大小，使其独立于周围文本的大小，方法是在文档的头部包含字体大小设置。

这当然可能会导致不同的问题，例如，如果需要在脚注中使用更小的 Katex，那么我不确定它是否是问题的完整答案。这是代码片段，以防代码对尝试不同的设置有用。

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

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

How to set different sizes for individual fonts in CSS?

html

css

font-size

font-face

katex