CSS Font
CSS Font （CSS字体）
In this chapter we will speak about fonts. （在本章中，我们将讨论字体。）
The CSS font properties are used for defining the size, font family, boldness and the style of the text. （CSS字体属性用于定义文本的大小、字体系列、粗体和样式。）
Besides, it sets the font of the element to a system font. （此外，它将元素的字体设置为系统字体。）
The CSS font property is considered to be a shorthand property. So, here we will explain the following properties:
Font Family （字体）
Font Style （字体样式）
Font Size （大小：）
Font Weight （字重）
Font Variant （字体变体）
When we write some information, some text or link in our webpage, we must give them styles. We use the properties mentioned above for text styles. Let’s know more about these properties. （当我们在网页上写一些信息、文字或链接时，我们必须给他们一些风格。我们将上述属性用于文本样式。让我们进一步了解这些房源。）
Font Family
Font Family （字体）
For the font family of the text we use font-family property. This is the name of the font, which we want to use in our webpage. （对于文本的字体系列，我们使用font-family属性。这是我们希望在网页中使用的字体名称。）
p {
font-family: Arial, sans-serif;
}
As you see we have given to our <p> tag font-family property. We differentiate two types of families:
generic family - a group of font families having a similar look (like “Serif” or “Sans-serif”) （-通用系列-具有相似外观的一组字体系列（如“Serif”或“Sans-serif” ））
font family - a particular font family (like “Times New Roman” or “Arial”) （-字体系列-特定字体系列（如“Times New Roman”或“Arial” ））
When we use specific font family which consists of more than one word, we take the name in quotes (like “Times New Roman”). At the same time, we must write more than one font-family, because in case the browser won’t support your first font-family, you can have several other similar font-families. （当我们使用由多个单词组成的特定字体系列时，我们使用引号中的名称（如“Times New Roman” ）。同时，我们必须编写多个字体系列，因为如果浏览器不支持您的第一个字体系列，您可以有其他几个类似的字体系列。）
Font Style
Font Style （字体样式）
We use font-style property mostly for texts that we want to write italic. （我们使用font-style属性主要用于我们想要写斜体的文本。）
Most of all we use the following values of the font-style property:
normal, which shows the text normally, （-正常，正常显示文本，）
italic , which shows the text in italics, （-斜体，以斜体显示文本，）
oblique, which “leans” the text. （-倾斜， “倾斜”文本。）
Example of the font-style property:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p style="font-style:normal">This is paragraph with font-style property with normal value.</p>
<p style="font-style:italic">This is paragraph with font-style property with italic value.</p>
<p style="font-style:oblique">This is paragraph with font-style property with oblique value.</p>
</body>
</html>
By default our text will be font-style: normal, even without writing this value.
Font Size
Font Size （字体尺寸）
For the size of our text, we use font-size property. （对于文本的大小，我们使用font-size属性。）
We need to give values to our property. The values are given by pixels, pt, em, rem etc. You can find the full list in font-size section . You need to know that 1em=16px. Most of all we use pixels (px). （我们需要赋予我们的财产价值。这些值由像素、pt、em、rem等给出。您可以在字体大小部分找到完整列表。您需要知道1em = 16px。大多数情况下，我们使用像素（ px ）。）
Example of the font-size property:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h3 style="font-size:40px;"> Some heading with font-size property.</h3>
<p style="font-size:25px;"> Some paragraph with font-size property.</p>
<a style="font-size:2em;"> Some link with font-size property.</a>
</body>
</html>
You need to check it also by yourself. You can do that with our html online editor click here. （您也需要自行检查。您可以使用我们的html在线编辑器单击此处。）
Font-Variant
Font-Variant （字体变形）
The font-variant property allows to set the text as normal or small-caps from a font family. （Font-variant属性允许将文本设置为字体系列的普通或小写字母。）
The small-caps value makes the lowercase letters to the uppercase letters, but these converted letters will be displayed a little smaller than normal uppercase letters. （小写字母值将小写字母转换为大写字母，但这些转换后的字母将比正常的大写字母小一点。）
Example of the font-variant property:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.smallcaps {
font-variant: small-caps;
}
</style>
</head>
<body>
<h2>Font-variant property example</h2>
<p>Here we used a normal text as you can see.</p>
<p class="smallcaps">But We Used A Text With Small-Caps Here.</p>
</body>
</html>
Font Weight
Font Weight （字重）
Now you know that when we have some text, and we want to make our text italic, we use font-style property. （现在您知道，当我们有一些文本时，我们希望将文本变为斜体，我们使用font-style属性。）
Now let’s learn what we can do for making our text bolder in case it isn’t a heading because by default the headings are bold. （现在，让我们了解一下我们可以做些什么来使文本更加粗体，以防它不是标题，因为默认情况下标题是粗体。）
For that we use font-weight property. （为此，我们使用font-weight属性。）
Mostly we use the follow values of the font-weight proparty:
normal （标准值）
bold （大胆自信）
The value can be given also by numbers. （该值也可以通过数字给出。）
Example the font-weight property:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p style="font-weight:900">Some paragraph with the font-weight property with value bold.</p>
<p style="font-weight:normal">Some paragraph with the font-weight property with value normal.</p>
<p style="font-weight:bold">Some paragraph with the font-weight property with value bold.</p>
</body>
</html>
As you remember we have told that we can give value with numbers 100-900. Value 100 is normal, and 900 is the bolder. And as much as the number grows between 100 and 900, the font becomes bolder. （如您所知，我们已经告诉过您，我们可以给值100-900。值100为正常值， 900为粗体值。只要数字在100到900之间增长，字体就会变得更加粗体。）