css 中文文字字体_使用CSS的网络字体

css 中文文字字体

CSS | 网络字体 (CSS | Web fonts)

Web fonts allow people to use fonts that are not pre-installed in their computers. When you want to include a particular font simply include the font file on your browser and it will be downloaded.

Web字体允许人们使用计算机中未预装的字体。当您想包含特定字体时，只需在浏览器中包含字体文件，即可下载该文件。

Your fonts are specified within the CSS @font-face rule.

您的字体在CSS @ font-face规则中指定。

In this rule firstly specify the name of the font you wish to use and point to the font file.

在此规则中，首先指定要使用的字体名称，然后指向字体文件。

不同的网络字体格式 (Different web font formats)

TrueType Fonts(TTF):
TrueType字体(TTF) ：

This is a standard font developed by Apple and Microsoft in the late 1980s. TrueType is the most commonly used font format for both the Mac OS and Microsoft Windows operating systems.
这是Apple和Microsoft在1980年代后期开发的标准字体。 TrueType是Mac OS和Microsoft Windows操作系统最常用的字体格式。
OpenType fonts(OTF):
OpenType字体(OTF) ：

This is a format for scalable computer fonts developed by Microsoft. OpenType fonts are widely used today on the major computer platforms.
这是Microsoft开发的可缩放计算机字体的格式。如今，OpenType字体已在主要计算机平台上广泛使用。
Web Open Font Format (WOFF):
Web开放字体格式(WOFF) ：

It is a font format for use in web pages. It was developed in 2009. This font format is essentially OpenType or TrueType with compression and additional metadata. Its goal is to support font distribution between a server and a client over a network with bandwidth constraints.
它是一种用于网页的字体格式。它于2009年开发。此字体格式本质上是OpenType或TrueType，带有压缩和其他元数据。它的目标是支持具有带宽限制的网络上的服务器和客户端之间的字体分配。
SVG Fonts/Shapes:
SVG字体/形状 ：

These fonts allow SVG to be used as glyphs when displaying text. You can also apply CSS to SVG documents and to the SVG documents text the @font-face rule can be applied.
这些字体允许在显示文本时将SVG用作字形。您还可以将CSS应用于SVG文档，也可以将@ font-face规则应用于SVG文档文本。
Embedded OpenType Fonts (EOT):
嵌入式OpenType字体(EOT) ：

EOT fonts designed by Microsoft are a compact form of OpenType fonts used as embedded fonts on web pages.
Microsoft设计的EOT字体是OpenType字体的紧凑形式，用作网页上的嵌入式字体。

Syntax:

句法：

@font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}

Note: Always use lower case letters for font url.

注意：字体URL始终使用小写字母。

Example:

例：

<!DOCTYPE html>
<html>
<head>
<style>
@font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
* {
font-family: myFirstFont;
}
</style>
</head>
<body>
<div>
This is a web font i wish to include in my browser.
</div>
</body>
</html>

Output

输出量

In the above example, a sansation_light web font is used. In location, we have specified the direct location of the font as it was in our folder that contained the main file you need to use the correct location of the file of the font to add it to your website. Using a direct URL is also possible.

在上面的示例中，使用了sansation_light Web字体 。在位置中，我们已经指定了字体的直接位置，因为它在包含主文件的文件夹中，因此您需要使用该字体文件的正确位置将其添加到您的网站。也可以使用直接URL。

CSS Font Descriptors

CSS字体描述符

font-family: It is used to define the name of the font you wish to use.
font-family ：用于定义您要使用的字体的名称。
src: It is used to specify the URL of the web font.
src ：用于指定Web字体的URL。
font-stretch: It is used to specify how to font should be stretched. Some values are normal, condensed, ultra-condensed, etc.
font-stretch ：用于指定应如何拉伸字体。一些值是normal ， condensed ， ultra-condensed等。
font-style: It is used to specify the style you wish to use for the font. There are three values: normal, italic and oblique.
font-style ：用于指定希望用于字体的样式。有三个值：正常，斜体和倾斜。
font-weight: It is used to define the boldness of the font used. Its values are normal and bold.
font-weight ：用于定义所用字体的粗体。其值是正常和粗体。