数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究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** 类显示了文本。
字体粗细实用程序
对于浅色字体粗细，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 为网站以及登陆页面等营销产品提供的类型比例实用程序。使用这些类可以节省大量时间，并使您的网站看起来专业且一致。
更新于： 2023年4月28日
142 次浏览
广告