AtoZ CSS截屏视频：文本和版式

Loading the player…

正在加载播放器…

This screencast is a part of our AtoZ CSS Series. You can find other entries to the series here.

该截屏视频是我们的AtoZ CSS系列的一部分。 您可以在此处找到该系列的其他条目。

成绩单 (Transcript)

Text is everywhere. Without it, the web wouldn’t be such a useful place.

文字无处不在。 没有它，网络将不会是一个有用的地方。

There are many different CSS properties for styling text and in this video, we’ll cover most of them in some way shape or form.

有许多不同CSS属性可用于设置文本样式，在本视频中，我们将以某种形式覆盖其中的大多数。

There’s quite a few, so we best get started! As there are so many things to cover, this episode will demonstrate some of them, but in part just act as an overview of the tools in the box.

有很多，所以我们最好开始吧！ 由于涉及的内容太多，因此本集将演示其中的一些内容，但部分内容仅是概述框中的工具。

文字属性 (Text Properties)

There are many CSS properties that control the visual appearance of text – but only seven of them actually start with the word “text”.

有许多CSS属性可控制文本的视觉外观-但实际上只有七个属性以“ text”一词开头。

Those are:

那些是：

• text-align

  text-align

• text-decoration

  text-decoration

• text-indent

  text-indent

• text-overflow

  text-overflow

• text-rendering

  text-rendering

• text-shadow

  text-shadow

• text-transform

  text-transform

We looked at text-align in some depth in “Episode 10: justify“; it’s used to control the alignment of text on the screen and is often set to left, right or center.

我们在“ 第10集： justify ”中深入研究了text-align ； 它用于控制屏幕上文本的对齐方式，通常设置为left ， right或center 。

text-decoration is commonly set to none to remove the underline added beneath hyperlinks. It can also be set to underline, overline or line-through to create a strikeout effect.

通常将text-decoration设置为none以删除超链接下方添加的underline 。 也可以将其设置为underline ，上overline或line-through以创建删除线效果。

text-indent allows us to control indentation. I often use this with a large negative value to bump text off the page so it’s visually hidden but still exists in the document for assistive devices like screen readers.

text-indent允许我们控制缩进。 我经常将此值与较大的负值结合使用，以使文本脱离页面，因此它在视觉上是隐藏的，但仍存在于文档(例如屏幕阅读器)中。

text-overflow allows styling of any text that overflows its container – where a word is too long to fit for example. We can style this overflowing text with clip to hide it, allow it to be visible or add an ellipses character to show that the word continues but there’s no space for it.

text-overflow允许对容器溢出的所有文本进行样式设置(例如，单词太长而无法容纳)。 我们可以使用clip对溢出的文本进行样式设置以将其隐藏，允许其可见或添加省略号以表明该单词在继续，但没有空格。

text-rendering is a property from the SVG spec but allows the browser to optimize the rendering of text for either rendering speed, geometric precision or legibility. Setting text-rendering to optimiseLegibility will enable kerning and ligatures in some fonts in some browsers. The support isn’t great and apparently there can be some side effects of using it so I’d recommend checking them before you do.

text-rendering是SVG规范的属性，但允许浏览器针对渲染速度，几何精度或可读性来优化文本的渲染。 将text-rendering设置为optimiseLegibility将在某些浏览器中启用某些字体的字距调整和连字。 该支持不是很好，使用它显然会产生一些副作用，因此我建议您在使用前进行检查。

text-shadow works a bit like box-shadow but for text. It takes four properties: the x-offset and y-offset control the position of the shadow; the blur radius controls how soft the shadow is and finally, the color sets the color of the shadow.

text-shadow工作原理类似于box-shadow但适用于文本。 它具有四个属性：x偏移和y偏移控制阴影的位置； 模糊半径控制阴影的柔和度，最后，颜色设置阴影的颜色。

text-transform can be used to change the case of text. It can be used to set all letters to uppercase, lowercase or capitalise the first letter of each word. One of my bug-bears is finding LOTS OF ALL CAPS WORDS written into the HTML – it’s far more flexible to control this visual styling from CSS instead.

可以使用text-transform更改文本的大小写。 它可用于将所有字母设置为大写，小写或将每个单词的首字母大写。 我的一个负担大的问题是找到了很多写在HTML中的大写单词–相反，从CSS控制这种视觉样式要灵活得多。

字体属性 (Font properties)

There’s a whole range of other things we can manipulate and style with text too and there are a series of CSS properties for font that allow us to control our typography.

我们还可以使用文本进行一系列其他操作和样式设置，还有一系列用于fontCSS属性，这些属性使我们可以控制字体。

font-family sets the typeface to be used. This can be set as a “stack” and the browser will select the first font in the list that it can load successfully.

font-family设置要使用的字体。 可以将其设置为“堆栈”，浏览器将在列表中选择可以成功加载的第一个字体。

font-size allows us to change the size of the text.

font-size允许我们更改文本的大小。

font-style can create italicised or oblique text whereas the font-weight property is used to create bold text. font-weight can also be used to create a range of weights with a numeric value. This value is a multiple of 100 ranging from 100 to 900. font-weight:normal maps to the value 400 and font-weight:bold to 700.

font-style可以创建斜体或倾斜文本，而font-weight属性用于创建粗体文本。 font-weight也可以用于创建带有数字值的一系列权重。 此值是100的倍数，范围是100到900。font font-weight:normal映射到值400， font-weight:bold映射到700。

There are some pretty fancy new font variant settings in CSS3 that enable things like small caps and ligatures to be used where possible – we don’t have time in this video to go into detail but if you’re interested in finding out more about these features, have a search for “open type features in CSS”.

CSS3中有一些漂亮的新font变体设置，可以在可能的情况下使用小写字母和连字之类的内容–我们没有时间在此视频中进行详细介绍，但是如果您有兴趣了解更多有关这些的信息功能，搜索“ CSS中的开放式功能”。

Finally, there’s a shorthand property for font that allows multiple font properties and line-height to be set in one go. The syntax has quite a specific order that I can never remember so I tend to not use this property very often. However, it is useful for setting font-family,font-size and line-height in a single line as follows:

最后， font的速记属性允许一次性设置多个font属性和line-height 。 语法有一个非常具体的顺序，我不记得了，因此我倾向于不经常使用此属性。 但是，这对于在line-height设置font-family ， font-size和line-height很有用，如下所示：

p {font: 12px/24px 'Avenir', 'Arial', sans-serif;}

其他性质 (Other properties)

We’ve looked in some detail at the text- and font- properties but there’s a handful of others that can also come in handy when styling words on the page.

我们已经对text-和font-属性进行了详细的研究text-但是还有很多其他样式也可以在样式页面上的样式时派上用场。

We looked at line-height in “Episode 12: line-height“. This property controls the spacing above and below the lines of text. We can also control the space between individual letters with letter-spacing. This can be set to a large positive value to increase spacing or to a small or negative value to tighten everything up.

我们着眼于line-height “的：第12集line-height “。 此属性控制文本行上方和下方的间距。 我们还可以通过letter-spacing控制各个字母之间letter-spacing 。 可以将其设置为较大的正值以增加间距，也可以设置为较小的值或负值以使所有内容变紧。

We can also control the spacing between words with the word-spacing property and control the wrapping of text with word-wrap.

我们还可以使用word-spacing属性控制word-spacing之间word-spacing并使用word-wrap控制文本word-wrap 。

It’s also possible to control how white space behaves using the white-space property. This is a useful property to control the visual output of preformatted text like code snippets – something that I do quite a bit.

也可以使用white-space属性控制空白的行为。 这是一个有用的属性，用于控制诸如代码段之类的预格式化文本的视觉输出-我做了很多事情。

So there we have a fairly complete list of all things text related. This isn’t the most exciting list of CSS properties I’ve ever come across but since content is king, being able to control how our text is displayed to the reader is incredibly important. Hopefully, there were a couple of new things on this list for you; I know I certainly found a few things I’d not seen before when putting this episode together!

因此，我们有了一个与文本相关的所有事物的完整列表。 这不是我遇到过的最令人兴奋CSS属性列表，但是由于内容为王，因此能够控制我们的文本向读者显示的方式非常重要。 希望这个清单上有一些新的东西对您有用； 我知道我确实发现了将这一集放在一起之前从未见过的几件事！

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