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

#npm 包 typography-theme-legible 使用教程

##前言在 Web 开发中，良好的版面样式和排版是非常重要的，而 Typography 就是这个领域的专家。Typography.js 是一个适用于 JavaScript 应用的插件，它使用了对局部装订的方法来提供优秀的排版。接下来，我们将介绍一个 npm 包，它提供了一个该插件中的可用主题——typography-theme-legible。

##typography-theme-legible 简介 typography-theme-legible 是一个语义化的主题。该主题被设计为易于阅读的内容网站，并包含大量的设置来实现这个目标。它使用 Serif 字体，强调了正文文本的可读性。

##如何安装

下面是使用 npm 包管理系统进行安装的命令：

npm install --save typography typography-theme-legible

##如何使用

在你的应用程序中，你需要创建一个 Typography 实例。这需要设置一个 theme 属性，用来指定所使用的主题。typography-theme-legible 就是其中之一。

import Typography from 'typography'
import legibleTheme from 'typography-theme-legible'

const typography = new Typography(legibleTheme)

在这个实例中，Typography 会将主题的各项属性与它的默认属性进行合并，然后应用于你的页面。

##示例代码

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

import Typography from 'typography'
import legibleTheme from 'typography-theme-legible'

const typography = new Typography(legibleTheme)
typography.injectStyles()

注意，在这个示例中我们加载了从 CDN中获取的 Typography 样式文件。注意将css URL进行更新，以适应最新版本。在代码中，Typography 实例的 injectStyles() 方法调用将样式插入到网页页面的 <head> 区域内。

##主题配置

typography-theme-legible 有不同的配置选项。你可以通过查看该主题的源代码来了解主题的所有设置选项。在这里，我们将示例代码中的较少配置增加到其将字体设置为源代码中定义的特定字体之外，没有做任何改动。

import Typography from 'typography'
import legibleTheme from 'typography-theme-legible'

legibleTheme.headerFontFamily = ['Avenir Next', 'Helvetica Neue', 'Segoe UI', 'Helvetica', 'Arial', 'sans-serif']
legibleTheme.bodyFontFamily = ['Georgia', 'serif']

const typography = new Typography(legibleTheme)
typography.injectStyles()

在这个代码片段中，我们将 document.body 的字体系列改成 Serif，同时通过在 headerFontFamily 属性中设置更喜欢的字体，改进了图形和标题的字体外观。

总结

Typography 是一个伟大的 JavaScript 应用程序，它允许开发者轻松地为其应用程序创建更优秀的排版和板式样式。typography-theme-legible 提供了一个可用的主题，包括大量的设定，可以使网站的质量提升。

在这篇文章中，我们介绍了如何使用 npm 包管理系统进行安装，并创建一个 Typography 主题实例。最后，我们在示例代码中演示了如何改用更好的字体样式，以改进我们的网页排版。

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