css 字体字体图标_CSS基础知识：了解字体
css 字體字體圖標
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!
謝謝閱讀！
翻譯自: https://itnext.io/css-fundamentals-understanding-fonts-82e9930528fa
css 字體字體圖標
總結
以上是生活随笔為你收集整理的css 字体字体图标_CSS基础知识：了解字体的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 背包问题（C语言）
- 下一篇： css 菜单栏悬停_在CSS中构建悬停菜