npm 包 typography-theme-wordpress-2013 使用教程-JavaScript中文网-JavaScript教程资源分享门户

Typography-theme-wordpress-2013 是一个基于 Typogr.js 和 Wordpress 2013 主题的 web 字体工具包。它可以帮助开发者快速地实现网站排版美化，提供了多种字体样式的配置，包括了段落样式、标题样式，以及其他网页排版相关内容的调整，是一款非常实用的工具包。本篇文章将为大家详细介绍这个工具包的使用教程。

安装和使用

首先，在你的项目目录下使用 npm 安装 typography 和 typography-theme-wordpress-2013 包：

npm install typography typography-theme-wordpress-2013

然后，在你工程的 JavaScript 文件中引入这个包，并使用其提供的 API 来配置样式：

const Typography = require("typography")
const wordpress2013 = require("typography-theme-wordpress-2013")

const typography = new Typography(wordpress2013)

// 将生成的样式添加到网站的 head 中
typography.injectStyles()

最后，通过在 HTML 中使用预定义的类来应用相应的样式：

<h1 class="alpha">这是一个一级标题</h1>
<p class="delta">这是一个段落</p>
<a class="zeta">这是一个链接</a>

除预定义的类以外，用户也可以在 typography.js 中自定义样式，比如说修改段落样式：

-- -------------------- ---- -------
----- ---------- - ---------------------
----- ------------- - ------------------------------------------

----- ---------- - --- ------------
  -----------------
  ------------- -------
  --------------- ----------- ---------
  ----------------- -------------- --------------
  --------------- -- -- --
    -- -
      --------- --------
    -
  --
--

-- ------------ ---- -
-------------------------

详解配置项

在 typography-theme-wordpress-2013 中，有多达数十个配置项可供轻松调整排版设置，其中部分主要的配置项如下：

baseFontSize

文本的基础字号。这个值将决定在其余的相关样式被应用时，字体的相对大小。

const typography = new Typography({
  ...wordpress2013,
  baseFontSize: "16px"
})

baseLineHeight

管网排版时，行高的比例。比如说，1.2 意味着每行文本高度是其字体大小的 1.2 倍。使用像素也是可行的，但是保证它和字体基本一致。

const typography = new Typography({
  ...wordpress2013,
  baseLineHeight: 1.5
})

headerFontFamily

用于标题的字体系列。该值应该是包含待用字体名字的数组，字体要按优先级的顺序排列。

const typography = new Typography({
  ...wordpress2013,
  headerFontFamily: ["Avenir Next", "Helvetica Neue", "Segoe UI", "Helvetica", "Arial", "sans-serif"]
})

bodyFontFamily

用于正文的字体系列。该值应该是包含待用字体名字的数组，字体要按优先级的顺序排列。

const typography = new Typography({
  ...wordpress2013,
  bodyFontFamily: ["Georgia", "serif"]
})

overrideStyles

一个函数，返回一个对象，其中包含所有你想要覆盖（修改）的样式。比如说，你可以使用它来改变段落和标题的样式：

-- -------------------- ---- -------
----- ---------- - --- ------------
  -----------------
  --------------- -- -- --
    --- -
      --------- ------------
      ----------- ---
    --
    -- -
      --------- -------
      ----------- ----
      ---------- -------
      ------------- ------
    -
  --
--

结语

Typography-theme-wordpress-2013 是一个非常实用的前端工具包，可以大大地提升 web 站点排版的美感和精度。本篇文章对该工具包的使用方法进行了详细介绍，并提供了多个代码示例。如果你是一个 web 前端开发者，就不要错过这个优秀的工具包啦。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/5f2555c03b0ab45f74a8b996