如何按固定比例调整所有 HTML 标题的大小？答案

【问题标题】：How to resize all HTML headings by a fixed proportion?如何按固定比例调整所有 HTML 标题的大小？
【发布时间】：2021-11-26 22:59:39
【问题描述】：

Dancing Script 是一种看起来（至少对我而言）本质上小于 Helvetica、Arial、sans-serif 的字体：

* {
  padding: 0;
  margin: 0;
}
div > div {
  display: flex;
  flex-direction: horizontal;
  align-items: flex-end;

}
body {
  --main-font: Helvetica, Arial, sans-serif;
  --handwritten-font: 'Dancing Script', cursive;
  font-family: var(--main-font);
}

.handwritten {
  font-family: var(--handwritten-font);
}

<!DOCTYPE html>
<!-- https://www.webmasterpoint.org/programmazione/html5/guida-html5/struttura-sito-header-nav-section-article-aside-footer-nuovo-doctype.html -->
<html lang="en">
  <head>
    <style>
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&display=swap');
    </style>
  </head>
  <body>
    <div class="outer">
      <div>
          <h1>Ciao</h1>
          <h1 class="handwritten">Ciao</h1>
        </div>
        <div>
          <h2>Ciao</h2>
          <h2 class="handwritten">Ciao</h2>
        </div>
        <div>
          <h3>Ciao</h3>
          <h3 class="handwritten">Ciao</h3>
        </div>
        <div>
          <h4>Ciao</h4>
          <h4 class="handwritten">Ciao</h4>
        </div>
        <div>
          <h5>Ciao</h5>
          <h5 class="handwritten">Ciao</h5>
        </div>
        <div>
          <h6>Ciao</h6>
          <h6 class="handwritten">Ciao</h6>
        </div>
      </div>
  </body>
</html>

因此，举个例子，我使用h2标签和字体Helvetica, Arial, sans-serif，我想使用h1大小的字体Dancing Script, cursive，所以我会采用这样的规则：

/* browser's defaults */
h1 {
  font-size: 2em
}
h2 {
  font-size: 1.5em
}
/* ... and so on */

/* my styles */
h1.handwritten-font {
  /* increas font-size by the 2em/1.5em ratio */;
}

h2.handwritten-font {
  /* increas font-size by the 2em/1.5em ratio */;
}
/* ... and so on */

但显然 font-size: calc(2em/1.5em); 规则不是我们所需要的：

* {
  margin: 0;
  padding: 0;
}

body {
  --main-font: Helvetica, Arial, sans-serif;
  --handwritten-font: 'Dancing Script', cursive;
  font-family: var(--main-font);
}

.handwritten {
  font-family: var(--handwritten-font);
}

div > div {
  display: flex;
  align-items: flex-end;
}

h1 {
  font-size: 2em
}
h2 {
  font-size: 1.5em
}

/* these have no effect */
h1.handwritten {
  font-size: calc(2em/1.5em);
}

h2.handwritten {
  font-size: calc(2em/1.5em);
}

<!DOCTYPE html>
<!-- https://www.webmasterpoint.org/programmazione/html5/guida-html5/struttura-sito-header-nav-section-article-aside-footer-nuovo-doctype.html -->
<html lang="en">
  <head>
    <style>
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&display=swap');
    </style>
  </head>
  <body>
    <div class="outer">
      <div>
          <h1>Ciao</h1>
          <h1 class="handwritten">Ciao</h1>
        </div>
        <div>
          <h2>Ciao</h2>
          <h2 class="handwritten">Ciao</h2>
        </div>
        <div>
          <h3>Ciao</h3>
          <h3 class="handwritten">Ciao</h3>
        </div>
        <div>
          <h4>Ciao</h4>
          <h4 class="handwritten">Ciao</h4>
        </div>
        <div>
          <h5>Ciao</h5>
          <h5 class="handwritten">Ciao</h5>
        </div>
        <div>
          <h6>Ciao</h6>
          <h6 class="handwritten">Ciao</h6>
        </div>
      </div>
  </body>
</html>

【问题讨论】：

我怀疑我可能没有完全理解，因为我不明白为什么答案不是设置 font-size: calc(2em* 2 / 1.5) [只是拼出来-那里如果不涉及变量，当然不需要让 CSS 来做算术]。
font-size-adjust 属性可能会有所帮助。
我认为 font-size-adjust 在这里不相关（尽管我可能是错的）。你能说说为什么 font-size: calc(2em * 2 / 1.5) 不合适吗？
@AHaworth，如果我这样做h1.handwritten { font-size: calc(2em * 2/1.5); }、h2.handwritten { font-size: calc(2em * 2/1.5); } 等等，我将得到相同font-size 的所有标题，而我希望每个hN.handwritten 都有一个font-size，它是calc(2/1.5) 乘以对应hN 的font-size。

标签： html css font-size

【解决方案1】：

您可以将“普通”标题字体大小定义为 CSS 变量，然后使用这些变量来计算手写版本的 2/1.5 大小（尽管您可能希望更好地控制每个 hn 具有自己的调整大小，但这sn-p 对所有都使用相同的因子）。

    @import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&display=swap');
    * {
      margin: 0;
      padding: 0;
    }
    
    body {
      --main-font: Helvetica, Arial, sans-serif;
      --handwritten-font: 'Dancing Script', cursive;
      font-family: var(--main-font);
    }
    
    .handwritten {
      font-family: var(--handwritten-font);
    }
    
    div > div {
      display: flex;
      align-items: flex-end;
    }
    
    h1 {
      --hem: 2em;
      font-size: var(--hem);
    }
    
    h2 {
      --hem: 1.5em;
      font-size: var(--hem);
    }
    
    .handwritten {
      font-size: calc(var(--hem) * 2 / 1.5);
    }

<!DOCTYPE html>
<!-- https://www.webmasterpoint.org/programmazione/html5/guida-html5/struttura-sito-header-nav-section-article-aside-footer-nuovo-doctype.html -->
<html lang="en">
<body>
  <div>
    <div>
      <h1>Ciao</h1>
      <h1 class="handwritten">Ciao</h1>
    </div>
    <div>
      <h2>Ciao</h2>
      <h2 class="handwritten">Ciao</h2>
    </div>
  </div>
</body>

</html>

【讨论】：