ember-typography 是一个 Ember.js 的插件，用于改善网站的排版。它提供了一系列的类，方便前端工程师在网站中使用。使用 ember-typography 可以使得网站排版更加整洁、易读，提高用户的体验效果。本文将详细介绍 ember-typography 的使用方法。
安装
可以通过以下命令，使用 npm 安装 ember-typography 插件。
npm install --save ember-typography
使用
在项目中使用 ember-typography 插件非常简单。首先，需要在 Ember 应用的 app.css 文件中，引入 ember-typography 插件提供的样式文件。
@import "ember-typography/index";
然后，在页面中，通过对元素添加对应的类，即可使用 ember-typography 插件提供的排版样式。例如，在 <h1> 标签中，添加类 u-h1，即可使用 ember-typography 插件提供的 <h1> 标签样式。
<h1 class="u-h1">这是一个标题</h1>
除了 <h1> 标签之外，ember-typography 插件还提供了许多其他标签的样式，如 <h2>、<h3>、<p>、<a> 等等。
深度学习
ember-typography 插件提供的排版样式，是基于基于 BEM （Block-Element-Modifier） 设计模式。BEM 设计模式是一种组织 CSS 样式的方法。其核心概念是将所有 HTML 元素看作是一个组件，为每个组件编写 CSS 样式。每个组件的样式都被包含在一个独立的 CSS 类名中。
例如，对于一个按钮组件，它的 HTML 代码如下所示。
<button class="btn btn--primary">立即付款</button>
在这个例子中，“btn” 是组件的名称，“btn--primary” 是组件的一个“修饰符”。每个单词之间都用一个“-”分隔。
指导意义
ember-typography 插件提供的排版样式，使得前端工程师在网站布局和设计中，能够更加高效地使用 CSS 样式。遵循 BEM 设计模式，能够更好地组织和管理 CSS 样式。同时，对于网站的设计和体验，使用 ember-typography 插件提供的排版样式，也能够提高用户的体验效果。
示例代码
下面是一个例子，展示如何使用 ember-typography 插件提供的排版样式。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----------------------- ----------
----- ---------------- ---------------------------------------------------------------------
-------
------
---- ------------------
--- ------------------------
--- -------------------------
-- ----------------------
-- -------- -------------------------
------
-------
-------在此例子中，我们首先引入 ember-typography 插件提供的样式文件。然后，定义了一个 container 类，对网站的布局进行管理。在 <h1>、<h2>、<p>、<a> 标签中，添加相应的类，即可使用 ember-typography 插件提供的排版样式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e1aa563576b7b1ecc0d