简介
@moodxd/base-typography 是一个基于 CSS 的前端 typograhy 样式库，可以帮助开发者快速构建统一的字体排版系统。它采用 SCSS 编写，并通过 Gulp 进行自动化构建，支持自定义配置。
安装
在项目根目录下运行以下命令安装 @moodxd/base-typography：
npm install @moodxd/base-typography --save
使用
引入样式
通过以下代码将样式表引入项目的 main.scss 文件中：
@import "@moodxd/base-typography/_typography.scss";
配置变量
@moodxd/base-typography 支持自定义配置，可以在项目根目录下新建 variables.scss 文件，并在其中定义变量覆盖默认值。以下是常用变量及其默认值：
-- -------------------- ---- ------- -- ---- ------ ------------- -------------- ------------------- ----- --- ------- ------- ------- ---------- ---- ----- ----- ----- --------- ----- ---------- --------- --------------------- ------------ --------- -- ---- ---- ---------------- ---- --------- ----------------- ---- --------- ------------------------- --- --------- -- ---- ------ ------------------ --- --------- ---------------------------- ---- --------- -- ---- ----- ------------ ---- --------- -- ------- ----- --------------- ---- ---------
使用 mixins
@moodxd/base-typography 提供了若干个 SCSS mixins，可以在项目中直接调用。以下是常用 mixins 示例：
font-size
设置字体大小，可传入百分数或具体数值。默认值为 $font_size_base。
h1 {
@include font-size(200%);
}font-weight
设置字重（粗细），可传入数值或以下常量：
$font_weight_light: 300$font_weight_normal: 400$font_weight_medium: 500$font_weight_semibold: 600$font_weight_bold: 700
h1 {
@include font-weight($font_weight_bold);
}line-height
设置行高，可传入百分数或具体数值。默认值为 $line_height_base。
h1 {
@include line-height(1.8);
}text-color
设置文本颜色，可传入任意 CSS 颜色值。默认值为 $text_color。
h1 {
@include text-color(red);
}heading-style
设置标题样式，可传入 1-6 之间的整数。默认值为 2。
h1 {
@include heading-style(1);
}总结
@moodxd/base-typography 可以帮助前端开发者快速构建统一的字体排版系统，进而提高网站的可读性和专业度。通过自定义配置和使用 SCSS mixins，开发者可以更方便地使用和管理此库。
示例代码
-- -------------------- ---- ------- ---- ---------- --- --------- ----- ----- ---------- ------ ----- ---------------- ---------------------- ----- ---------------- ----------------------- ------- ------ --------- ---------- -------- -- -- ------------ -------- ----- ----- --- ----- ----------- ---------- ----- --- -- ------- ------ ---------- -- ------ -- ------ ----- ----------- ------- -------
-- -------------------- ---- ------- -- --------- ------- ------------------------------------------- ------------- --------- ----------- ---------------- ----- ------------------ ---- -- - -------- ----------------- - -- - -------- ----------------- - - - -------- ------------------ -------- ----------------- -
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005556781e8991b448d29a0