在Web前端开发中，排版和排版规则是非常重要的一部分，良好的排版能够大大提升用户的阅读体验以及网站的整体美观度。于是，一款npm包——typography应运而生。typography是由KyleAMathews所开发的一款基于React和JavaScript的排版工具，利用了类型学、颜色理论等多种文学和设计原理，以自动化方式生成排版样式，并提供多种主题可供选择。
本文将详细讲解如何使用typography进行文本排版。
安装 & 使用
安装
在使用typography之前，需要先安装npm。npm是Node.js的包管理器，可以从npm仓库中安装和发布Javascript软件包。
- --- ------- -------- ----------
使用
typingography适用于React应用程序，我们可以在代码中添加以下内容来启用：
- 安装
react-typography之后，在React组件顶部引入创建好的typography组件，并设置typography配置。
------ ----- ---- -------
------ -------- ---- -----------
------ ---------- ---- ------------
------ - ---------------- ---------- - ---- ------------------
----- ---------- - --- ------------
------------- -------
----------- -
--
----------------
------------------
---------------- ----------------------- --
----------- ----------------------- --
---- --
--------------------
-------------------------------
-在上述代码中，我们首先引入了 Typography 和 GoogleFont 组件，以及 typography，然后将typography配置应用于组件中。我们还另外添加了一个名为 baseFontSize 的属性作为基础字体大小。scaleRatio 则控制了字体类型的大小比例。
- 在组件中使用typography组件
------ ----- ---- -------
------ - ---------- - ---- ------
----- - ----- - - ----------
----- --- - -- -- -
-----
------------------
----------------------------
------ ---------------------
----------------------------
------
-在上述代码中，我们使用了由Antd组件库提供的 Typography 和 Title 组件，通过设置 Typography 和 Title 的不同级别以达到不同字体的呈现效果。同时也可以结合自定义样式进行调整。
相关API
设置typography
构造函数
----- ----------------- - --- -----------
-
------------- -------
-
-在构造函数中可以传入多种参数进行typography配置，baseFontSize仅是其中一种。
CSS样式
----------------------------
使用toString方法可以获取typography生成的CSS样式字符串，可以通过将它直接嵌入到HTML页面中以实现排版样式。
定制typography
在typography的构造函数中，我们可以进行更多高级配置。例如，您可以对字体配额和字体类型进行配置。
--- ------------
------------- -------
------------ -
-
----- ----- ---- ----
------- -------
-
--
----------------- -------- ------ ---------- ------ ------ ---- ------------ -------- --------------
--上述构造函数中，googleFonts字段为您提供了选择字体的灵活性，并且您可以使用 webfontloader 从 Google Fonts 动态加载字体。
组件API
依赖于不同的组件库，API可自行参考官方文档。这里以Antd的Typography组件为例，一些可能有用的API如下:
Typography
component="p"- 作用：组件将作为哪种HTML元素呈现。
- 类型：string。
className- 作用：应用于生成的HTML元素的class名称。
- 类型：string。
id- 作用：应用于生成的HTML元素的ID。
- 类型：string。
style- 作用：应用于生成的HTML元素的内联样式
- 类型：object。
variant="body2"- 作用：Typography变体。具体可参照组件库文档。
- 类型：string。
typeStyle="default"- 作用：设置从Typography集合中的样式。具体可参照组件库文档。
- 类型：PropTypes.any。
hidden- 作用：隐藏生成的HTML元素。
- 类型：bool。
Title
作用及API参见组件库文档。
示例代码
------ ----- ---- -------
------ -------- ---- -----------
------ ---------- ---- ------------
------ - ---------------- ---------- - ---- ------------------
------ - ---------- - ---- ------
----- - ----- - - ----------
----- ---------- - --- ------------
------------- -------
--
----------------
------------------
---------------- ----------------------- --
----------- ----------------------- --
-----
------------------
----------------------------
------ ---------------------
----------------------------
------
--------------------
-------------------------------
-总结
typography是一款非常实用的前端工具，使用它可以免去繁琐的排版工作，简化代码开发。在使用过程中，建议多体验不同样式以更好地适配项目需要，还可以进一步定制typography以满足更具体的需求。我们相信，使用typography进行文本排版，将成为Web前端开发中的一个有价值的能力。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/80012