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

This article is a part of our AtoZ CSS Series. You can find other entries to the series here. You can view the full transcript and screencast for Text and Typography here.

本文是我们的AtoZ CSS系列的一部分。 您可以在此处找到该系列的其他条目。 您可以在此处查看完整的成绩单和截屏，以了解“文本和排版”。

Welcome to our AtoZ CSS series! In this series, I’ll be exploring different CSS values (and properties) each beginning with a different letter of the alphabet. We know that sometimes screencasts are just not enough, so in this article, we’ve added quick tips on using OpenType features to style text.

欢迎来到我们的AtoZ CSS系列！ 在本系列中，我将探索不同CSS值(和属性)，每个均以不同的字母开头。 我们知道有时截屏视频还不够，因此在本文中，我们添加了有关使用OpenType功能设置文本样式的快速提示。

T代表Text和OpenType (T is for Text and OpenType)

This week’s CSS tips are all about text and typography. In the original screencast video we looked at all sorts of different CSS properties to do with text styling. But what we’ve yet to cover in-depth in this series is OpenType features.

本周CSS技巧全部关于文本和排版。 在原始的截屏视频中，我们研究了各种与文本样式有关CSS属性 。 但是，我们尚未在本系列中深入探讨OpenType功能。

This family of properties adds all sorts of typographic goodness to your text and, as long as you have access to fonts that offer these features, they really give the reading experience a boost for your users.

该属性系列为您的文本增加了各种印刷上的优点，而且，只要您可以访问具有这些功能的字体，它们就可以为您的用户带来真正的阅读体验。

Let’s start with where you might find these fancy fonts.

让我们从可能找到这些奇特字体的地方开始。

使用高级字体服务 (Use a premium font service)

With the @font-face directive in CSS, we can load up any custom font into our projects. This may come from a service like Google Fonts or you may create a webfont of your own using a generator like Font Squirel. Both these services offer a load of great, free fonts but sometimes you may want some more professional, premium typefaces from a paid service like Adobe Typekit, Fonts.com or one of the may others.

使用CSS中的@font-face指令，我们可以将任何自定义字体加载到我们的项目中。 这可能来自诸如Google Fonts之类的服务，或者您可以使用诸如Font Squirel之类的生成器来创建自己的webfont 。 这两种服务提供了很大的，免费字体负荷，但有时你可能想从诸如有偿服务更专业一些，溢价字体的Adobe Typekit ， Fonts.com或5别人的一个。

Not only do these premium services provide top quality fonts, they do a lot of magic behind the scenes to improve the legibility, the delivery, and performance of loading the fonts themselves. I’d love to go into depth on this at some point in the future but it kinda goes over my head at the moment!

这些高级服务不仅提供了高质量的字体，而且还在幕后发挥了许多魔力，从而提高了字体本身的可读性，交付性和性能。 我很乐意在将来的某个时候深入探讨这一点，但此刻这件事已经超出了我的脑海！

I currently use Adobe Typekit for delivering fonts for client projects and have been pretty happy with the service so far. My only complaint is that I can’t download all their fonts for local usage which is a bit of a pain when needing to design with these fonts in Sketch or Adobe Photoshop.

我目前使用Adobe Typekit为客户端项目提供字体，到目前为止，我对该服务一直很满意。 我唯一的抱怨是我无法下载所有字体以供本地使用，这在需要在Sketch或Adobe Photoshop中使用这些字体进行设计时会有些痛苦。

But one of the major benefits is that they offer a number of fonts with OpenType features. Having a font that supports OpenType features is the first step in being able to work through the following handful of tips.

但是主要优点之一是它们提供了许多具有OpenType功能的字体。 拥有支持OpenType功能的字体是能够通过以下几个技巧进行工作的第一步。

打开连字 (Turn on ligatures)

Ligatures are an OpenType feature that replaces common sequences of multiple characters with a single character for improved legibility and more elegant visual appearance. Examples of ligatures can be found here.

连字是一种OpenType功能，可以用一个字符替换多个字符的公共序列，以提高可读性和更优雅的视觉外观。 连字的例子可以在这里找到。

Classic examples are combinations of letters like ff or fi, fl, ffi or th. When viewed as multiple characters, the letters can seem as though there’s too much space between them. Ligatures just flow better. It’s a micro-optimisation but it looks classy and you’ll impress all your type nerd friends.

经典示例是字母组合，例如ff或fi ， fl ， ffi或th 。 当被视为多个字符时，字母之间似乎有太多的间距。 结扎线更好地流动。 这是一个微优化，但看起来很经典，您会给所有类型的书呆子朋友留下深刻的印象。

To use ligatures in CSS (if your typeface supports them) you can use the following snippet:

要在CSS中使用连字(如果您的字体支持它们)，可以使用以下代码段：

body {
  font-variant-ligatures: common-ligatures;
  font-feature-settings: "liga", "clig"; /* for IE */
}

There is an alternate syntax for setting font-feature-settings instead which allows a comma separated list of OpenType features to be set in one go – a bit like shorthand for margin or padding.

还有另一种设置font-feature-settings语法，它允许一次性设置以逗号分隔的OpenType功能列表-有点像margin或padding简写。

Ligatures are turned on by default if you use Safari but to ensure Firefox, Opera, Chrome and IE (10+) get the best reading experience, you’ll need to set this explicitly.

如果您使用Safari，则默认情况下会打开连接功能，但要确保Firefox，Opera，Chrome和IE(10+)获得最佳阅读体验，则需要明确设置。

使用小菜一碟来增添光彩 (Use swashes to add flourish)

If you’re working on a project that requires that little extra typographic flourish, you can use the swashes OpenType feature. This will take key characters in your text and replace them with swash glyphs; these are the same letters but much more extravagant.

如果您正在从事的项目需要很少的印刷排版，则可以使用Swashes OpenType功能。 这将在您的文本中包含关键字符，并用斜体字形替换它们； 这些都是相同的字母，但更为奢侈。

For a list of OpenType features in CSS, check out this useful resource.

有关CSS中OpenType功能的列表，请查看此有用的资源 。

To turn on swashes, use the following snippet:

要打开斜盘，请使用以下代码段：

.fancy-title {
  font-feature-settings: "swsh";
}

通过字距调整来改善字母间距 (Improve letter-spacing with kerning)

In the text screencast we discussed properties like letter-spacing and word-spacing for controlling the space between characters and words. But for extra control and better legibility, we can use the OpenType feature of font-kerning.

在文本截屏中，我们讨论了诸如letter-spacing和word-spacing类的属性，用于控制字符和单词之间word-spacing 。 但是为了获得额外的控制和更好的可读性，我们可以使用font-kerning的OpenType功能。

Kerning is the process of adjusting the space between certain combinations of characters so that they are the most appropriate for the reader. This is something that designers may obsess over, by hand, in graphics packages like Illustrator or Photoshop but has often had to relinquish control of as soon as text gets to the browser.

字距调整是调整某些字符组合之间的间距的过程，以使它们最适合读者。 设计人员可能会在Illustrator或Photoshop之类的图形包中手动处理此问题，但通常必须在文本到达浏览器后立即放弃控制。

This feature can be enabled by setting the font-kerning or font-feature-settings property as follows:

可以通过如下设置font-kerning或font-feature-settings属性来启用此功能：

body {
  font-kerning: normal;
  font-feature-settings: "kern";
}

一次设置多个OpenType功能 (Set multiple OpenType features at once)

We’ve looked at three of the most common and most impressive OpenType features but there are much more. If you want to leverage these powerful features, it’s likely that you’ll want to set many of them all at once. And we can do that with the font-variant or font-feature-settings shorthands.

我们研究了三个最常见和最令人印象深刻的OpenType功能，但还有更多。 如果您想利用这些强大的功能，则可能需要一次设置所有这些功能。 我们可以使用font-variant或font-feature-settings速记来实现。

The reason for discussing both of these properties is due to browser support issues. At the time of writing, IE10 supports font-feature-settings but doesn’t support the other OpenType properties like font-kerning or font-variant properties. Safari does support the individual properties like font-kerning but doesn’t recognise font-feature-settings.

讨论这两个属性的原因是由于浏览器支持问题。 在撰写本文时，IE10支持font-feature-settings但不支持其他OpenType属性，如font-kerning或font-variant属性。 Safari确实支持诸如font-kerning等单个属性，但不识别font-feature-settings 。

So, to turn on all the features just discussed, we need to use the following set of properties to cover our bases:

因此，要打开刚刚讨论的所有功能，我们需要使用以下属性集来覆盖我们的基础：

body {
  font-variant: common-ligatures;
  font-kerning: "kern";
  font-feature-settings: "liga", "clig", "swsh", "kern";
}

使用样板开始您的OpenType体验 (Use a boilerplate to kick start your OpenType experience)

If all this feels like a bit too much to get your head around and you’d like something quick and easy to get you up and running, I totally understand and fortunately, there’s something to help you out

如果这一切感觉太麻烦了，并且您想快速轻松地开始使用并运行起来，那么我完全理解并且很幸运，这里有一些可以帮助您的事情

You may be familiar with normalize.css which is a CSS “reset” used to normalise user agent stylesheets across browsers.

您可能对normalize.css很熟悉，它是CSS“重置”，用于标准化浏览器之间的用户代理样式表。

I recently stumbled across normalise-opentype.css which adds OpenType features with all the necessary properties and fallbacks for deep browser support whilst giving you all the OpenType goodness. The normalise-opentype project is on github and using it is as simple as downloading and linking up an additional stylesheet or adding it to your set of pre-processor @imports if using one of those.

我最近偶然发现了normalise- opentype.css，它添加​​了OpenType功能以及所有必要的属性和后备功能，以提供对深度浏览器的支持，同时为您提供所有OpenType优点。 @imports - @imports 项目位于github上 ，使用起来就像下载和链接其他样式表，或者使用其中一个添加到您的预处理器@imports一样简单。

It’s a great looking tool and I’ll be experimenting with it on my next project for sure!

这是一个很棒的工具，我肯定会在下一个项目中对其进行实验！

翻译自: https://www.sitepoint.com/atoz-css-quick-tip-text/