Normalize-OpenType.css 使用教程

Normalize-OpenType.css 使用教程

normalize-opentype.cssAdds OpenType features—ligatures, kerning, and more—to Normalize.css.项目地址:https://gitcode.com/gh_mirrors/no/normalize-opentype.css

项目介绍

Normalize-OpenType.css 是一个开源项目，旨在为 Normalize.css 添加 OpenType 字体特性，如连字、字距调整等。该项目由 Kenneth Ormandy 开发，通过引入这些特性，可以提升网页排版的质量和一致性。

项目快速启动

安装

你可以通过 Bower 或 npm 安装 Normalize-OpenType.css。

使用 Bower 安装

bower install normalize-opentype.css

使用 npm 安装

npm install normalize-opentype.css

引入样式表

在 HTML 文件中引入 Normalize.css 和 Normalize-OpenType.css：

<link src="css/normalize.css" rel="stylesheet" />
<link src="css/normalize-opentype.css" rel="stylesheet" />

如果你使用的是预处理器，如 Harp，可以通过导入文件的方式引入：

@import "normalize";
@import "normalize-opentype";

应用案例和最佳实践

连字

Normalize-OpenType.css 支持基本的连字特性，并可以在 <h1>、<h2> 和 <h3> 等标题中使用更高级的连字。

数字样式

根据上下文的不同，Normalize-OpenType.css 会自动选择合适的数字样式，如比例数字、等宽数字和旧式数字。

小型大写字母

在正文中，常规的大写字母可能会过于显眼。Normalize-OpenType.css 可以让 <abbr> 标签使用小型大写字母，从而更好地融入文本。

字距调整

Normalize-OpenType.css 默认开启字距调整，以提升文本的可读性。

典型生态项目

Typogr.js

Typogr.js 是一个用于处理排版细节的 JavaScript 库，与 Normalize-OpenType.css 结合使用，可以进一步提升网页的排版质量。

Fira 字体

Fira 字体是由 Mozilla 开发的一款开源字体，适用于网页和移动设备，与 Normalize-OpenType.css 配合使用，可以获得更好的排版效果。

Source Code Pro 字体

Source Code Pro 是由 Adobe 开发的一款等宽字体，适用于代码编辑器和终端，与 Normalize-OpenType.css 结合使用，可以提升代码的可读性。

通过以上介绍和示例，你可以快速上手并充分利用 Normalize-OpenType.css 来提升你的网页排版质量。

normalize-opentype.cssAdds OpenType features—ligatures, kerning, and more—to Normalize.css.项目地址:https://gitcode.com/gh_mirrors/no/normalize-opentype.css