时间戳

首页 > 解决方案 > 如何按固定比例调整所有 HTML 标题的大小？

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

问题描述

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>

因此，举个例子，我使用h2tag 和 font Helvetica, Arial, sans-serif，我想使用h1-sized font 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>

标签： htmlcssfont-size

解决方案

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

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

推荐阅读