0

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

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

所以我的问题是：

如何为不同的字体@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;
}

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

4

1 回答 1

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>

于 2020-11-30T09:50:32.130 回答