介绍
在设计网站时，选择合适的字体和排版对于页面的视觉效果和易读性都有很大的影响。而使用现成的排版库可以让我们轻松地实现这个目标。@mcw/typography 就是其中之一，它提供了优雅的排版风格和易用的 API。
安装
首先，将 @mcw/typography 安装到你的项目中：
npm i @mcw/typography
使用
@mcw/typography 为每个使用其 API 的元素自动计算合适的排版样式，并将其应用到元素上。
接下来，我们创建一个页面，并在其中添加一个待渲染的元素：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- --------------- --
---------------- -------------
-------
------
---- ---------------
------- --------------------------
-------
-------然后，我们在 index.js 文件中导入并使用 @mcw/typography 模块：
-- -------------------- ---- ------- ------ - ------------ - ---- ------------------ ----- --- - ------------------------------- ------------- - - --- --------------------- --------------------- -- ---------------------- -- - --------- ---- - ----- ---------- -- ------------------
这将为所有使用 mdw-h1 和 mdw-body1 样式的元素计算并应用 @mcw/typography 的排版样式。
API
mdwTypograhy
mdwTypograhy(element: HTMLElement, options?: TypograhyOptions): void
应用 @mcw/typography 的排版样式到指定的元素上。如果元素内包含其他元素，则会递归地应用样式。
可选的 options 参数：
type TypograhyOptions = {
styles?: { [key: string]: CSSStyleDeclaration };
classNames?: { [key: string]: string };
};其中：
styles：自定义样式对象，关键字为样式名称，值为 CSSStyleDeclaration 类型的样式对象。classNames： 其他样式名称，关键字为样式名称，值为@mcw/typography中已有的样式名称。
示例代码
请移步至 GitHub 仓库 查看完整的示例代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600560b181e8991b448def4d