AtoZ CSS 快速提示：使用 OpenType 处理文本

huma13453

本文是我们 AtoZ CSS 系列的一部分。您可以在此处找到该系列的其他条目。您可以在此处 查看文本和版式的完整文字记录和截屏视频。 欢迎来到我们的 AtoZ CSS 系列！在本系列中，我将探索不同的 CSS 值（和属性），每个值都以不同的字母开头。我们知道有时截屏视频是不够的，因此在本文中，我们添加了有关使用 OpenType 功能设置文本样式的快速提示。 T2-01 (1) T 代表文本和 OpenType 本周的 CSS 技巧都是关于文本和排版的。在原始截屏视频中，我们研究了与文本样式相关的各种不同的CSS 属性。但我们在本系列中尚未深入讨论 OpenType 功能。 Learn to Code with JavaScript 这一系列属性为您的文本添加了各种排版优点，只要您能够访问提供这些功能的字体，它们确实可以提升用户的阅读体验。 让我们从在哪里可以找到这些精美字体开始。

使用高级字体服务 通过@font-faceCSS 中的指令，我们可以将任何自定义字体加载到我们的项目中。这可能来自Google Fonts等服务，或者您可以使用Font Squirel等生成器创建自己的网络字体。这两种服务都提供了大量出色的免费字体，但有时您可能需要从等付费服务中获得一些更专业、更 华人华侨号码数据 优质的字体。 这些优质服务不仅提供高质量的字体，还在幕后发挥了很多作用，以提高字体本身加载的易读性、交付和性能。我很想在未来的某个时候深入探讨这个问题，但目前它有点超出了我的能力范围！ 我目前使用 Adob​​e Typekit 为客户项目提供字体，到目前为止，我对该服务非常满意。我唯一的抱怨是我无法下载他们的所有字体供本地使用，这在需要在 Sketch 或 Adob​​e Photoshop 中使用这些字体进行设计时有点痛苦。




但主要好处之一是它们提供了许多具有 OpenType 功能的字体。拥有支持 OpenType 功能的字体是能够完成以下一些技巧的第一步。 打开连字 连字是一项 OpenType 功能，它用单个字符替换多个字符的常见序列，以提高易读性和更优雅的视觉外观。可以在此处找到连字的示例。 典型的例子是字母的组合，如ffor fi、fl、ffior th。当将其视为多个字符时，字母之间的间距似乎太大。连字更加流畅。这是一个微观优化，但它看起来很优雅，你会给所有类型的书呆子朋友留下深刻的印象。 Learn to Code with JavaScript 要在 CSS 中使用连字（如果您的字体支持它们），您可以使用以下代码片段有一种替代的设置语法font-feature-settings，它允许一次性设置以逗号分隔的 OpenType 功能列表 - 有点像marginor的简写padding。 如果您使用 Safari，默认情况下会打开连字。