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!

謝謝閱讀！