Utility OpenType 使用教程

Utility OpenType 使用教程

utility-opentypeSimple, CSS utility classes for advanced typographic features.项目地址:https://gitcode.com/gh_mirrors/ut/utility-opentype

项目介绍

Utility OpenType 是一个简单的 CSS 工具类集合，用于高级排版功能。它通过特征查询优雅地回退，压缩后的文件大小小于 1.75kB。Utility OpenType 帮助你充分利用你加载的字体，将复杂的 CSS 简化为四个字母的排版工具类，因为：

• OpenType 特性应该像加粗和斜体一样容易应用
• OpenType 特性应该可预测地级联
• OpenType 特性应该优雅地回退

项目快速启动

安装

如果你使用 Sass 或 PostCSS，可以通过 npm 安装：

npm install --save utility-opentype

然后在你的源文件中包含它：

@import "utility-opentype";

如果你使用 Sass 但没有 Eyeglass 模块，你需要包含文件在 node_modules 目录中的实际路径：

@import "/node_modules/utility-opentype/css/utility-opentype";

如果你想直接使用 CSS，可以下载最新版本的编译文件或引用托管的 CDN 版本：

<link href="https://cdn.rawgit.com/kennethormandy/utility-opentype/master/css/utility-opentype.min.css" rel="stylesheet">

使用

安装并包含后，你可以在你的标记中使用这些类：

<p class="liga">使用连字</p>
<p class="onum">使用旧样式数字</p>

应用案例和最佳实践

案例一：使用连字

<p class="liga">使用连字可以改善排版效果，例如：ffi, ffl, ct 等。</p>

案例二：使用旧样式数字

<p class="onum">旧样式数字（Oldstyle numbers）在排版中看起来更加和谐，例如：1234567890。</p>

最佳实践

• 确保你的字体支持你想要使用的 OpenType 特性。
• 使用 @supports CSS 特性查询来优雅地回退。
• 在不同的浏览器和设备上测试你的排版效果。

典型生态项目

Utility OpenType 可以与以下框架和工具一起使用：

• Basscss: 一个轻量级的 CSS 框架，与 Utility OpenType 结合使用可以提供更强大的排版功能。
• Sass: 一个 CSS 预处理器，用于编写更简洁和模块化的 CSS。
• PostCSS: 一个使用 JavaScript 转换 CSS 的工具，可以与 Utility OpenType 一起使用来增强 CSS 功能。

通过结合这些工具和框架，你可以创建出更加强大和灵活的排版系统。

utility-opentypeSimple, CSS utility classes for advanced typographic features.项目地址:https://gitcode.com/gh_mirrors/ut/utility-opentype