无需登录 数据私有 本地保存

OpenType特性预览器 - 连字/小型大写等

前端设计 排版工具 OpenType 字体 预览
79
0
0
0
52px
🔗 连字展示 🔠 小型大写 🔢 数字&分数 📐 序数&上下标 🦋 更多连字
预览
The office staff fixed the difficult firewall configuration.
/* 默认字体设置，未启用额外特性 */
常见问题与知识点

OpenType 是 Adobe 和 Microsoft 联合开发的字体格式，它在 TrueType 基础上扩展了高级排版功能。OpenType 特性（OpenType Features）允许字体设计师在字体中嵌入替代字形、连字、小型大写、旧式数字等丰富的排版变体。通过 CSS 的 font-feature-settings 属性，网页开发者可以在浏览器中启用这些高级特性，让网页排版达到专业印刷水准。

连字是将两个或多个字母合并为一个特殊字形的排版技术。最常见的连字包括 fi、fl、ff、ffi、ffl 等。在没有连字的情况下，f 的顶部弯钩可能会与 i 的点或 l 的顶部发生碰撞，影响美观和可读性。连字解决了这个问题，让文字更加流畅优雅。高质量的字体通常包含数十甚至上百个连字组合，包括自主连字（如 st、ct）和历史连字等。

小型大写是经过专门设计的缩小版大写字母，其笔画粗细与正常大写字母保持一致，只是高度略低（通常与字体的小写x高度相近）。与之相比，直接用 CSS 缩小大写字母（如 font-size: 0.8em; text-transform: uppercase）会导致笔画变细、比例失调。真正的小型大写保留了原始设计的视觉重量，看起来协调统一。使用 font-feature-settings: "smcp" on 即可启用。

OpenType 特性需要字体本身内置相应的字形数据。如果字体设计师没有在字体中包含某个特性的替代字形，浏览器就无法显示该效果。例如，系统自带的 Arial 对 OpenType 特性支持非常有限，而 EB Garamond、Adobe Caslon Pro 等专业字体则包含丰富的特性。本工具推荐使用 EB Garamond（已通过 Google Fonts 加载），它对连字、小型大写、旧式数字等特性支持极好。

衬线数字（Lining Figures）所有数字高度一致，与大写字母高度对齐，适合用于表格和标题。旧式数字（Oldstyle Figures）则模仿手写体，数字具有上行和下行的变化——3、4、5、7、9 向下延伸，6、8 向上延伸，0、1、2 保持中间高度。旧式数字在正文段落中更加自然，不会像衬线数字那样在文本中显得突兀。使用 "onum" 启用旧式数字，"lnum" 启用衬线数字。

使用 CSS 的 font-feature-settings 属性即可启用 OpenType 特性。例如：
font-feature-settings: "liga" on, "smcp" on, "onum" on;
此外，CSS 还提供了 font-variant-ligatures、font-variant-caps、font-variant-numeric 等更语义化的属性。本工具右下角的 CSS 代码区域会实时显示当前配置对应的代码，方便直接复制使用。主流浏览器（Chrome、Firefox、Safari、Edge）均已支持这些属性。

可以使用专业字体管理软件（如 FontForge、FontLab）查看字体的 OpenType 特性表。在网页环境中，可以使用本工具切换不同特性来观察效果——如果切换某个特性后没有变化，说明当前字体不支持该特性。此外，Google Fonts 的字体详情页也会列出每个字体支持的 OpenType 特性。一般来说，专业的衬线字体（如 EB Garamond、Playfair Display）比无衬线字体支持更多特性。

OpenType 特性是纯视觉呈现层面的功能，不改变 HTML 中的文本内容，因此搜索引擎爬虫看到的仍然是原始文本。使用 OpenType 特性不会对 SEO 产生负面影响。相反，良好的排版可以提升用户体验和页面停留时间，这些因素间接有利于 SEO。同时，使用正确的语义化 HTML 标签配合 OpenType 特性，可以兼顾可访问性和美观性。
🔧 相关工具