In this tutorial, we’ll be learning about working with fonts in CSS!

在本教程中，我们将学习有关在CSS中使用字体的知识！

The font property is a shorthand property which can combine a number of sub-properties in a single declaration. For example:

font属性是一种简写属性，可以在单个声明中组合多个子属性。 例如：

font: 

This is equivalent to:

这等效于：

font-stretch: normal;
font-style: italic; 
font-variant: small-caps; 
font-weight: bold; 
font-size: 16px; 
line-height: 120%; 
font-family: "

Let’s review each of these properties in detail!

让我们详细检查每个属性！

Are you ready to take your CSS skills to the next level? Get started now with my new course at Educative.io SASS for CSS: Advanced Frontend Development. Get up-to-date on all the features you need to advance your front end development skills!

您准备好将CSS技能提高到一个新水平吗？ 现在就开始使用Educative.io SASSCSS新课程：高级前端开发 。 获取有关提高前端开发技能所需的所有功能的最新信息！

CSS字体属性 (CSS Font properties)

font-family (font-family)

The font-family property sets the font family that the element will use.

font-family属性设置元素将使用的字体系列 。

The selected font is not a single font face but one of a “family”, as a font is composed of a number of sub-fonts. Such as bold, italic, light, etc.

所选字体不是单个字体，而是“族”之一，因为字体由许多子字体组成。 例如粗体，斜体，浅色等。

body {
    font-family: Helvetica;
}

The font family name matches either a font that is embedded on the page or available on the user’s system.

字体系列名称与页面上嵌入的字体或用户系统上可用的字体匹配。

We could also choose multiple fonts like so:

我们还可以选择多种字体，如下所示：

body {
    font-family: Helvetica, Arial, sans-serif;
}

In this case, the browser will choose the next font, if the first cannot be used. This might happen if it’s either not found on the users local machine, or if the server that the font is hosted in is down.

在这种情况下，如果无法使用第一个字体，浏览器将选择下一个字体。 如果在用户本地计算机上找不到该字体，或者托管该字体的服务器已关闭，则可能会发生这种情况。

Font types are typically classified as Serif, Sans-Serif, or Monospace fonts. Here’s some of most popular:

字体类型通常分为Serif，Sans-Serif或Monospace字体。 以下是一些最受欢迎的内容：

Serif: Georgia, Times New Roman

衬线：佐治亚州，时代新罗马

Sans-Serif: Arial, Helvetica, Verdana, Lucida Grande , Trebuchet MS

Sans-Serif： Arial，Helvetica，Verdana，Lucida Grande和Trebuchet MS

Monospace: Courier, Courier New, Lucida Console

Monospace： Courier，Courier New，Lucida Console

line-height (line-height)

The line-height property sets the amount of space above and below our element.

line-height属性设置元素上方和下方的空间量。

p {
    line-height: 1.5;
}

We can also use the keyword values normal,none as well as a number, length (any valid CSS unit), or percentage (being the elements’ font size multiplied by the %).

我们还可以使用关键字值normal ， none以及数字，长度(任何有效的CSS单位 )或百分比(即元素的字体大小乘以％)。

font-weight (font-weight)

The font-weight property sets the width (or thickness) of each of the characters of a font. You can use the following values:

font-weight属性设置font-weight的每个字符的宽度(或粗细)。 您可以使用以下值：

• normal

  normal

• bold

  bold

• bolder

  bolder

• lighter

  lighter

Note that bolder & lighter are relative to the elements’ parent.

请注意， bolder和lighter体相对于元素的父级。

Numeric values can also be used:

也可以使用数值：

• 100

  100

• 200

  200

• 300

  300

• 400 (equivalent to normal)

  400 (相当于normal )

• 500

  500

• 600

  600

• 700 (equivalent to bold)

  700 (相当于bold )

• 800

  800

• 900

  900

With 100 being the lightest font, and 900 the boldest.

100是最轻的字体，而900是最粗体。

For values other than 400 or 700 to have an effect, the font being used must have built-in faces that match these weights.

为使400或700以外的值生效，所使用的字体必须具有与这些权重匹配的内置字体。

font-stretch (font-stretch)

With font-stretch we can choose a narrow or wide face of the font. Assuming the font being used contains corresponding font faces.

使用font-stretch我们可以选择font-stretch的窄或宽。 假设所使用的字体包含相应的字体。

The possible values are:

可能的值为：

• ultra-condensed

  ultra-condensed

• extra-condensed

  extra-condensed

• condensed

  condensed

• semi-condensed

  semi-condensed

• normal

  normal

• semi-expanded

  semi-expanded

• expanded

  expanded

• extra-expanded

  extra-expanded

• ultra-expanded

  ultra-expanded

font-style (font-style)

The font-style property accepts one of three possible values: normal, italic, and oblique.

font-style属性接受三个可能值之一： normal ， italic和oblique 。

For example, to set our font to italic:

例如，将字体设置为斜体：

p {
  font-style: italic;
}

There is very little difference between using italic and oblique. Both apply a sloping effect to text.

有使用差别很小是italic和oblique 。 两者都对文本施加倾斜效果。

font-size (font-size)

The font-size property is used to determine the size of fonts. For example:

font-size属性用于确定字体的大小。 例如：

p {
  font-size: 20px;
}

You either use a valid length value (such as px, em, rem a percentage, etc), or a predefined value keyword.

您可以使用有效的长度值(例如px ， em ， rem a rem等)，也可以使用预定义的value关键字。

The available keyword values are:

可用的关键字值为：

• xx-small

  xx-small

• x-small

  x-small

• small

  small

• medium

  medium

• large

  large

• x-large

  x-large

• xx-large

  xx-large

• smaller

  smaller

• larger

  larger

With both smaller & larger being relative to the parent element.

相对于父元素而言，都larger smaller 。

Note that font-size is a mandatory value. When using the font shorthand property, the size must be set (or it will be invalid)!

请注意， font-size是必填值。 使用font简写属性时，必须设置大小(否则将无效)！

font-variant (font-variant)

The font-variant property is a bit of a relic. It was originally used to set text to small caps, it had 3 values:

font-variant属性有点遗迹。 它最初用于将文本设置为小写，它具有3个值：

• normal

  normal

• inherit

  inherit

• small-caps

  small-caps

Small caps sets the text to “smaller caps”, that is smaller than the regular uppercase letters.

小写大写将文本设置为“小写大写”，小于常规的大写字母。

I just wanted to mention that 🎉 I’ve started my own blog! 🎉 Check it out at www.easeout.co

我只想提及🎉我已经开始了自己的博客 ！ at在www.easeout.co上查看

I also have a newsletter, if you’d like to keep up!

如果您想跟上我的消息，我也有一份通讯 ！

I post frequently about web design & development, however as always I’ll be continuing to post my development tutorials here on Medium.

我经常发布有关Web设计和开发的文章，但是与往常一样，我将继续在Medium上发布我的开发教程。

Thanks for reading!

谢谢阅读！