css文本字体形状_使用CSS更改文本字体

css文本字体形状

In the last module, we discussed text formatting. By now, you already know how to work with backgrounds and text formatting in CSS. Let's begin with Fonts.

在最后一个模块中，我们讨论了文本格式。 到目前为止，您已经知道如何在CSS中使用背景和文本格式 。 让我们从字体开始。

Fonts set a theme for your webpage. Fonts also help you connect with your audience. Using Comic-Sans on a formal webpage makes no sense and could immediately result in a negative impression, while on a website for kids, the same font can seem playful.

字体为您的网页设置了主题。 字体还可以帮助您与观众建立联系。 在正式的网页上使用Comic-Sans没有意义，并且可能立即产生负面印象，而在儿童网站上，相同的字体似乎很有趣。

You can specify all the font properties in a single rule by using the font property.

您可以使用font属性在一个规则中指定所有字体属性。

Syntax:

句法：

font: font-style font-variant font-weight font-size font-family;

You are not required to include all the properties, consider an example:

您不需要包括所有属性，请考虑一个示例：

p { 
    font: normal small-caps bold 18pt/22pt "Times New Roman", Courier;
}

This is compatible with CSS1, CSS2 and CSS3 along with following Web Browsers,

它与CSS1 ， CSS2和CSS3以及以下Web浏览器兼容，

• IE 4+

  IE 4+

• Firefox 1+

  Firefox 1+

• Opera 6+

  歌剧6+

• Safari 1+

  Safari 1+

• Chrome 1+

  Chrome1+

字体家族- font-family (Font Family - font-family)

This property defines the font face to be used for the text.

此属性定义用于文本的字体。

Syntax:

句法：

font-family: font 1[, font2, ... ,fontN]

Fonts may be named specifically or a generic font family name can be used. When multiple font names are specified using commas, they are read in a descending order looking for a first match. Not all fonts are supported in all the browsers and devices, hence we should provide comma separated fonts, so that, most device/browsers are covered. The five generic font names are:

字体可以专门命名，也可以使用通用字体系列名称。 使用逗号指定多个字体名称时，将按降序读取它们，以查找第一个匹配项。 并非所有浏览器和设备都支持所有字体，因此我们应该提供逗号分隔的字体，以便涵盖大多数设备/浏览器。 五个通用字体名称是：

• Serif

  衬线

• Sans-serif

  无衬线字体

• Cursive

  草书

• Fantasy

  幻想

• Monospace

  等宽空间

Note: They may not render the same way in all the browsers. 注意：它们在所有浏览器中的呈现方式可能都不相同。

Example:

例：

p{ 
    font-family: Serif; 
}

Live Example →

现场示例→

This is compatible with CSS1, CSS2 and CSS3 along with following Web Browsers,

它与CSS1 ， CSS2和CSS3以及以下Web浏览器兼容，

• IE 3+

  IE 3+

• Firefox 1+

  Firefox 1+

• Opera 4+

  歌剧4+

• Safari 1+

  Safari 1+

• Chrome 1+

  Chrome1+

This property is equivalent to the face attribute of a <font> tag. As the <font> tag is deprecated in HTML5, it is adviced not to use it.

此属性等效于<font>标记的face属性。 由于HTML5中已弃用<font>标记，建议不要使用它。

字体大小- font-size (Font Size - font-size)

This is used to set the size of the font.

这用于设置字体的大小。

Syntax:

句法：

font-size: length | percentage | Size in Words | inherit;

Here Size in Words referes to → larger | smaller | xx-small | x-small | small | medium | large | x-large | xx-larger

The default is medium. Lengths are often specified in points, pixels, em etc.

默认值为medium 。 长度通常以点 ， 像素 ， em等指定。

Percentage values set the font-size to a percentage of current inherited font-size.

百分比值将字体大小设置为当前继承的字体大小的百分比。

px pixel value is device dependent and is generally equivalent to 1/96th of an inch. But that value differs for devices with different screen resolution.

px像素值取决于设备，通常等于1/96英寸。 但是对于具有不同屏幕分辨率的设备，该值会有所不同。

Another widely used unit is em. Let's try to understand this, with the help of an example: If we set the font-size of the text in the body as 1em and set the font-size of the h1 heading text as 3em. Then no matter which device, the browser will make sure that the heading text is always 3 times the size of the body text.

另一个广泛使用的单位是em 。 让我们试着去了解这一点，用一个例子的帮助：如果我们设置的font-size在体内作为文本的1em并设置font-size的的h1标题文本3em 。 然后，无论使用哪种设备，浏览器都将确保标题文本始终是正文文本大小的3倍。

Example:

例：

#fontastic{ 
    font-size:12px;
}
#fontastic-1{
    font-size: 1em
}

Live Example →

现场示例→

This is compatible with CSS1, CSS2 and CSS3 along with following Web Browsers,

它与CSS1 ， CSS2和CSS3以及以下Web浏览器兼容，

• IE 3+

  IE 3+

• Firefox 1+

  Firefox 1+

• Opera 4+

  歌剧4+

• Safari 1+

  Safari 1+

• Chrome 1+

  Chrome1+

字体样式和字体粗细 (Font Style & Font Weight)

font-style sets the presentational style of the font while the font-weight sets the weight, or relative boldness of the text.

font-style设置font-style的外观样式，而font-weight设置文本的粗细或相对粗体。

Syntax:

句法：

font-style: italic | normal | oblique | inherit;
font-weight: normal | bold | bolder | lighter | 100 to 900 | inherit;

Live Example →

现场示例→

Most browsers would interpret 100-500 as normal text, 600-900 as bold. Relative values such as lighter or bolder will increase or decrease according to the parent element's font weight.

大多数浏览器会将100-500解释为普通文本，将600-900解释为粗体。 相对值(例如， 较浅或较粗)将根据父元素的字体粗细增加或减少。

This is compatible with CSS1, CSS2 and CSS3 along with following Web Browsers,

它与CSS1 ， CSS2和CSS3以及以下Web浏览器兼容，

• IE 3+

  IE 3+

• Firefox 1+

  Firefox 1+

• Opera 4+

  歌剧4+

• Safari 1+

  Safari 1+

• Chrome 1+

  Chrome1+

字体变体 (Font Variant)

This property sets a variation of the specified or default font-family.

此属性设置指定字体或默认字体系列的变体。

Syntax:

句法：

font-variant: normal | small-caps | inherit;

Live Example →

现场示例→

The small-caps value sets the text in small to capital. An application of the small-caps style is legal or license documents.

小写字母值将小写文本设置为大写。 小型大写字母的应用是法律或许可文件。

This is compatible with CSS1, CSS2 and CSS3 along with following Web Browsers,

它与CSS1 ， CSS2和CSS3以及以下Web浏览器兼容，

• IE 3+

  IE 3+

• Firefox 1+

  Firefox 1+

• Opera 4+

  歌剧4+

• Safari 1+

  Safari 1+

• Chrome 1+

  Chrome1+

翻译自: https://www.studytonight.com/cascading-style-sheet/css-fonts

css文本字体形状