Primer CSS字体排版类型比例工具

Primer CSS是由各种GitHub贡献者共同开发的CSS框架。其中之一就是排版，它使开发者能够样式化网站的文字内容。通过将这些实用类应用于HTML元素，我们可以轻松自定义应用程序的视觉外观。在本文中，我们将讨论Primer CSS提供的类型比例工具以及如何在我们的网页中使用它们。

什么是类型比例工具

类型比例工具是一系列属性的集合，可帮助您在整个网站上创建适当的排版。它包含一系列预定义的内置字体大小和行高，可以应用于网页上的不同HTML元素。

基本上，它正确估计了文本元素之间的比例间距和大小，使得它们在整个网站上看起来一致。这使得网站易于阅读，并对用户具有吸引力。

字体大小工具

在使用Primer CSS的任何类之前，我们必须通过npm安装它 –

npm install --save @primer/css

或者在HTML代码中使用CDN链接-

<link href="https://unpkg.com/@primer/css@^20.2.4/dist/primer.css" rel="stylesheet" />

在类型比例实用程序中，首先是文本的字体大小。为此，我们有6个类。它们是 .f1 – .f6 ，字体大小递减。

语法

<div class= "f1"> </div>

示例

<html>
<head>
   <link rel="stylesheet" href="https://unpkg.com/@primer/css@^20.2.4/dist/primer.css" />
   <style>
      * {
         margin: 10px;
         padding: 0;
         letter-spacing: 1px;
      }
      .heading {
         color: brown;
         text-decoration: underline;
         font-family: sans-serif;
      }
   </style>
</head>
<body>
   <h1 class="heading"> Primer CSS Typography Type Scale Utilities </h1>
   <div class="container"> Following we have different classes of type scale utilities as provided by Primer CSS. <p class="f1"> This is the text. It displays class "f1" </p>
      <p class="f2"> This is the text. It displays class "f2" </p>
      <p class="f3"> This is the text. It displays class "f3" </p>
      <p class="f4"> This is the text. It displays class "f4" </p>
      <p class="f5"> This is the text. It displays class "f5" </p>
      <p class="f6"> This is the text. It displays class "f6" </p>
   </div>
</body>
</html>

在这里，我们使用 f1-f6 类型为scale utilities的类来显示文本。

字体粗细工具

对于轻的字体粗细，Primer CSS只允许有限的范围。我们可以将字体粗细减小到f3（即20px）。这是因为随着文字尺寸的减小，字体变得更轻会使文本不易读。因此，我们只有5个相应的类。

语法

<div class= "f3-light"> </div>

示例

<html>
<head>
   <link rel="stylesheet" href="https://unpkg.com/@primer/css@^20.2.4/dist/primer.css" />
   <style>
      * {
         margin: 10px;
         padding: 0;
         letter-spacing: 1px;
      }

      .heading {
         color: brown;
         text-decoration: underline;
         font-family: sans-serif;
      }
   </style>
</head>
<body>
   <h1 class="heading"> Primer CSS Typography Type Scale Utilities </h1>
   <div class="container"> Following we have different classes of type scale utilities as provided by Primer CSS. <p class="f1-light"> This is the text. It displays class "f1-light" </p>
      <p class="f2-light"> This is the text. It displays class "f2-light" </p>
      <p class="f3-light"> This is the text. It displays class "f3-light" </p>
      <p class="f0-light"> This is the text. It displays class "f0-light" </p>
      <p class="f00-light"> This is the text. It displays class "f00-light" </p>
   </div>
</body>
</html>

行高度工具

我们可以使用这些类来改变元素之间的行高。在下面的示例中，我们有3个类。

示例

<html>
<head>
   <link rel="stylesheet" href="https://unpkg.com/@primer/css@^20.2.4/dist/primer.css" />
   <style>
      * {
         margin: 10px;
         padding: 0;
         letter-spacing: 1px;
      }

      .heading {
         color: brown;
         text-decoration: underline;
         font-family: sans-serif;
      }

      .container {
         width: 30%;
      }
   </style>
</head>
<body>
   <h1 class="heading"> Primer CSS Typography Type Scale Utilities </h1> Following we have different classes of type scale utilities as provided by Primer CSS. <div class="container">
      <p class="lh-default"> This is the text. It displays class "lh-default". apple mango banana watermelon orange kiwi pomegranate muskmelon pineapple grapes papaya guava strawberries raspberry avocado. </p>
      <p class="lh-condensed"> This is the text. It displays class "lh-condensed". apple mango banana watermelon orange kiwi pomegranate muskmelon pineapple grapes papaya guava strawberries raspberry avocado. </p>
      <p class="lh-condensed-ultra"> This is the text. It displays class "lh-condensed-ultra". apple mango banana watermelon orange kiwi pomegranate muskmelon pineapple grapes papaya guava strawberries raspberry avocado. </p>
   </div>
</body>
</html>

在这里，我们有不同行高的段落。

注意 - 我们还有另一个类 lh-0 ，它将所需元素的垂直行高设置为 0 。这可以用于不包含任何文本的元素。

营销类型比例实用工具

营销材料（如产品落地页，广告等）的字体大小和字体粗细略有不同。

示例

<html>
<head>
   <link rel="stylesheet" href="https://unpkg.com/@primer/css@^20.2.4/dist/primer.css" />
</head>
<style>
   * {
      margin: 10px;
      padding: 0;
      letter-spacing: 1px;
   }

   .heading {
      color: brown;
      text-decoration: underline;
      font-family: sans-serif;
   }
</style>
<body>
   <div class="container">
      <h1 class="heading"> Primer CSS Marketing Typography Type Scale Utilities </h1> Following we have different classes of marketing type scale utilities as provided by Primer CSS. <p class="f0-mktg"> This is the text. It displays class "f0-mktg" </p>
      <p class="f1-mktg"> This is the text. It displays class "f2-mktg" </p>
      <p class="f2-mktg"> This is the text. It displays class "f2-mktg" </p>
      <p class="f3-mktg"> This is the text. It displays class "f3-mktg" </p>
      <p class="f4-mktg"> This is the text. It displays class "f4-mktg" </p>
      <p class="f5-mktg"> This is the text. It displays class "f5-mktg" </p>
      <p class="f6-mktg"> This is the text. It displays class "f6-mktg" </p>
   </div>
</body>
</html>