Primer CSS 排版字体缩放工具
cssweb developmentfront end technology更新于 2024/5/14 19:24:17
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 个字体缩放工具类来显示文本。
字体粗细工具
对于细字体粗细，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>
结论
在本文中，我们了解了 Primer CSS 为网站以及落地页等营销产品提供的字体缩放实用程序。使用这些类可以节省大量时间，并使您的网站看起来更专业、更一致。
相关文章
有用资源
css 参考教程 - 该教程包含有关 css 的更多信息:https://www.cainiaomax.com/css/
