简介
typography-theme-de-young 是一个基于 typography.js 的 npm 包。typography.js 是一个以可配置方式生成样式的库，通常与 React 或 Gatsby 等现代化的静态站点生成器一起使用。
typography-theme-de-young 提供了一组基于德国汉堡的 De Young 博物馆的排版主题。这个主题非常适合用于文化机构，艺术品展示以及其他场合的网站中。
安装
要使用 typography-theme-de-young，首先需要安装 typography.js：
npm install --save typography
然后，在项目中安装 typography-theme-de-young：
npm install --save typography-theme-de-young
使用
在项目的 React 组件中，我们可以使用 typography.js 和 typography-theme-de-young 来生成网站的排版样式。以下是一个示例：
-- -------------------- ---- -------
------ ----- ---- -------
------ ---------- ---- ------------
------ ------------ ---- ---------------------------
----- ---------- - --- ------------------------
------ ------- -------- ------------ -
------ -
---- --------------------------------
--------------
---
----- ----- ----- --- ----- ----------- ---------- ----- ----- --------- --- ----- --- -------- --- --------- ------- ---- -- -------- ------ --- ----- ------ ---------- -------- ---------- ---- -- --------
----
------
-
-配置
typography-theme-de-young 的默认配置是优美的，但可能不适合所有的应用场景。下面我们讲解如何自定义配置。
在 typography.js 中，我们可以通过传递 Theme 来配置排版的样式。以下是一些例子：
指定字体
-- -------------------- ---- -------
------ ----- ---- -------
------ ---------- ---- ------------
------ ------------ ---- ---------------------------
----- ----------- - -
----------------
------------- -------
----------------- ----------- --------------
--------------- ------ ------ --------------
-
----- ---------- - --- -----------------------
------ ------- -------- ------------ -
------ -
---- --------------------------------
--------------
---
----- ----- ----- --- ----- ----------- ---------- ----- ----- --------- --- ----- --- -------- --- --------- ------- ---- -- -------- ------ --- ----- ------ ---------- -------- ---------- ---- -- --------
----
------
-
-修改颜色和间距
-- -------------------- ---- -------
------ ----- ---- -------
------ ---------- ---- ------------
------ ------------ ---- ---------------------------
----- ----------- - -
----------------
------------- -------
----------------- ----------- --------------
--------------- ------ ------ --------------
------------ ---------
---------- -------
----------------- ----
--------------- --
-
----- ---------- - --- -----------------------
------ ------- -------- ------------ -
------ -
---- --------------------------------
--------------
---
----- ----- ----- --- ----- ----------- ---------- ----- ----- --------- --- ----- --- -------- --- --------- ------- ---- -- -------- ------ --- ----- ------ ---------- -------- ---------- ---- -- --------
----
------
-
-总结
通过 typography.js 和 typography-theme-de-young，我们可以轻松地为 React 或 Gatsby 等现代化的静态站点生成器生成漂亮的排版样式。本文介绍了如何安装和使用 typography-theme-de-young，并提供了一些示例来自定义主题。希望本文可以帮助你优化你网站的排版样式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f2555bf3b0ab45f74a8b97b