CSS字体

该文章旨在教您HTML CSS字体及其属性，并用代码示例描绘了如何与其一起使用。您将学会使文本大胆或半旧文本，以更改CSS中的字体大小或字体家庭。

您还将看到CSS字体属性与字体属性的共同分类之间的差异。这些基本原理在 什么是字体？文章中描述。

CSS字体

CSS中的字体是包含字形视觉表示的资源。为了简化，它具有将字形与其代码匹配的信息。

字体资源可以在浏览器工作的设备上本地设置。对于此类字体，可以从字体资源中获得描述信息(例如，从文件montserrat.ttf)获得。对于Web字体，此类信息与字体资源上的链接一起附上。

CSS字体属性

CSS提供了几种字体属性，以控制网页上字体的外观和行为。它们可以单独或合并以实现CSS中所需的排版效应。并非所有浏览器都支持它们，因此使用这些属性时必须考虑跨浏览器兼容性。让我们看一下其中的一些(最常用的)：

字体家庭；
字体重量；
font-tretch;
字体风格；
字体大小；
字体
字体合成，
文本统治，
文本转换，
字母间隔，
线高，
单词间隔。

CSS字体家庭

带有常见设计的字体通常将其分组为字体系列。在家庭内部，字形可能会因宽度，坡度或重量而异。

CSS“ font-fomily”属性用于字体选择。最好通知一种类型字体的所有变化，因为很难预测用户计算机上的字体是否可用。在这种情况下，浏览器将检查它们的存在，并逐一整理通知字体。

CSS字体家庭财产已继承。

在CSS字体家庭中，有下一个值：

字体系列名称（Verdana、Montserrat、Courier）。
通用字体系列。此处需要注意以下五种 字体类型 之一：serif、sans serif、cursive（相当于手写字体）、fantasy（相当于显示字体）或 monospace。
initial - 设置默认值。
inherit - 继承父级的值。

使用的示例。

该示例中设置了下一个参数。

属性	文本 1 的值	文本 2 的值	文本 3 的值
font-family:	Lobster, Paisfico, cursive;	Audiowide, fantasy;	Courier, monospace;

句法：

 1// text 1
 2.text1 {
 3    font-family: Lobster, cursive;
 4}
 5// text 2
 6.text2 {
 7    font-family: Audiowide, fantasy;
 8}
 9// text 3
10.text3 {
11    font-family: Courier, monospace;
12}

应用的结果将是下一个(请注意，字体大小和颜色的设置为<body>的所有三个文本相同)

在不同字体家庭CSS中呈现的文本

CSS字体重量

字体重量属性负责字体线的厚度。

CSS字体重量属性是继承的。

在HTML CSS字体中，重量可能具有下一个值：

normal - 默认值为 400。
bold - 使字体变为半粗体。其粗细相当于 700。
bolder - 设置比祖先字体更粗的粗细。
lighter - 设置比祖先字体更细的粗细。
100, 200, 300, 400, 500, 600, 700, 800, 900 - 其中 100 表示最细的字体，900 表示最粗（最粗）的字体。
initial - 设置默认值。
inherit - 继承父级的值。

使用的示例。

让我们用字体重量的下一个参数渲染文本。

属性	文本 1 的值	文本 2 的值	文本 3 的值
font-weight:	900;	500;	200;

句法：

 1// text 1
 2.text1 {
 3    font-weight: 900;
 4}
 5// text 2
 6.text2 {
 7    font-weight: 500;
 8}
 9// text 3
10.text3 {
11    font-weight: 200;
12}

应用结果将如下所示（请注意，中所有三个文本的字体大小和颜色均设置为相同）。另外，务必记住，所使用的字体本身必须具有所需的粗细变化。大多数字体仅提供“半粗体”和“正常”粗细。示例中使用的字体“Segoe UI”具有足够的字体粗细变化，因此文本可以以示例中设置的所有值进行渲染。

以不同的字体重量CSS渲染的文本

CSS字体拉伸

属性`font-tretch’允许从字体家族中选择正常，凝结或扩展的字体。此HTML CSS属性也不适用于每种字体。只有在其家庭字体中具有变体伸展的一些特殊设计的字体才能呈现此属性。

CSS字体拉伸属性是继承的。

CSS中的字体拉伸值可能是下一个：

ultra-condensed - 最紧凑的字体。
extra-condensed - 第二紧凑的字体。
condensed - 紧凑的字体。
semi-condensed - 略微紧凑的字体。
normal - 默认值。
semi-expanded - 略微扩展的字体。
expanded - 扩展的文本。
extra-expanded - 第二扩展的字体。
ultra-expanded - 最扩展的字体。
initial - 设置默认值。
inherit - 继承父级的值。

使用的示例。

让我们用字体 - 拉伸的下一个参数渲染文本。

属性	文本 1 的值	文本 2 的值	文本 3 的值
font-stretch:	condensed;	normal;	expanded;

句法：

 1// text 1
 2.text1 {
 3    font-stretch: condensed;
 4}
 5// text 2
 6.text2 {
 7    font-stretch: normal;
 8}
 9// text 3
10.text3 {
11    font-stretch: expanded;
12}

应用的结果看起来像这样(请注意，<body>中所有三个文本的字体大小和颜色都相同)。

以不同字体伸展的文字呈现CSS

CSS字体样式

该属性调节字体斜率。

CSS字体样式属性已继承。

HTML CSS的字体式属性可能具有下一个值：

normal - 设置字体正常斜度的默认值。
italic - 用草书标记文本。
oblique - 设置字体的倾斜字体（字体的字体变体中包含倾斜字体）。
initial - 设置默认值。
inherit - 继承父级的值。

使用的示例。

让我们使用字体式的下一个参数渲染文本。

属性	文本 1 的值	文本 2 的值	文本 3 的值
font-style:	normal;	italic;	oblique;

句法：

 1// text 1
 2.text1 {
 3    font-style: normal;
 4}
 5// text 2
 6.text2 {
 7    font-style: italic;
 8}
 9// text 3
10.text3 {
11    font-style: oblique;
12}

应用的结果看起来像这样(请注意，<body>中所有三个文本的字体大小和颜色都相同)。

以不同的字体样式呈现的文本CSS

您可能已经注意到，斜体和’斜的结果看起来相同。答案是，仅当字体本身具有倾斜字体并且使用的字体没有一个时，该值`oblique’才能起作用。

CSS字体尺寸

该属性设置了字体的高速度。

CSS字体大小属性是继承的。

绝对大小 - 可以是 xx-small、x-small、small、medium、large、x-large 或 xx-large。默认值为 medium。
相对大小 - 相对于字体祖先的大小。可以是 smaller 或 large。可以使字体比绝对大小允许的更大或更小。
宽度 - 以像素 (px) 或埃姆 (em) 为单位。EM 是用于 Web 文档的可缩放单位。1 em 等于当前字体大小。如果文档的字体大小为 14pt，则 1em 等于 14pt。Em 经过缩放，因此 2em 等于 28pt。
% - 此相对值是相对于祖先字体计算得出的。它允许对 CSS 字体大小进行更精确的调整。
视点宽度 - vw，允许字体跟随所用浏览器窗口的大小。请注意，1vw = 视口宽度的 1%。如果视口宽度为 40 厘米，则 1vw 等于 0.4 厘米。
initial - 设置默认值。
inherit - 继承父级的值。

使用的示例。

那里设置了下一个参数。

属性	文本 1 的值	文本 2 的值	文本 3 的值
font-size:	7vw;	70px;	2em;

句法：

 1// text 1
 2.text1 {
 3    font-size: 7vw;
 4}
 5// text 2
 6.text2 {
 7    font-size: 70px;
 8}
 9// text 3
10.text3 {
11    font-size: 2em;
12}

应用的结果看起来像这样(请注意，<body>中所有三个文本的字体家庭和颜色都相同)。

以不同字体大小CSS渲染的文本

CSS字体

CSS 的 font 属性用于简化代码。通过该属性，可以将所有其他字体属性集中到一个属性中。可以指定以下属性：font-style、font-variant、font-weight、font-stretch、font-size/line-height 和 font-family。此外，还可以包含 CSS 2.1 支持的 font-variant 属性值 - normal或small-caps`。请参阅 什么是字体？ 文章中的 字体变体 段落，了解有关此属性的更多信息。

使用的示例。

那里设置了下一个参数。

属性	文本 1 的值	文本 2 的值	文本 3 的值
font:	6vw `Arial`;	60pt `Courier`, monospace;	-

句法：

 1// text 1
 2.text1 {
 3    font: 6vw Arial;
 4}
 5// text 2
 6.text2 {
 7    font: 60pt Courier, monospace;
 8}
 9// text 3
10.text3 {
11}

应用这些参数的结果在下面的图中(请注意，<body>中所有三个文本的颜色相同)。由于我们没有为第三本文本设置任何值，因此它是用默认参数渲染的。

以不同的字体propeties css呈现的文本

CSS字体合成

此HTML CSS属性定义了是否允许浏览器在字体系列中不存在Semibold或倾斜字体样式。因此，如果未指定font-weight和font-style，则浏览器不得合成半胶合或倾斜样式。

字体合成属性是继承的。

对于CSS字体合成参数，可以设置下一个值：

none - 禁止合成。
weight 或/和 style - 允许合成指定的属性。
initial - 设置默认值。
inherit - 继承父级的值。

使用的示例。

那里设置了下一个参数。

属性	文本 1 的值	文本 2 的值	文本 3 的值
font-synthesis:	weight;	style;	none;
font-weight:	900;	-	900;
font-style:	-	oblique;	oblique;

句法：

 1// text 1
 2.text1 {
 3    font-synthesis: weight;
 4    font-weight: 900;
 5}
 6// text 2
 7.text2 {
 8    font-synthesis: style;
 9    font-style: oblique;
10}
11// text 3
12.text3 {
13    font-synthesis: none;
14    font-weight: 900;
15    font-style: oblique;
16}

施加的结果将呈现为下一个图像中所示(请注意，<body>中的所有三个文本的颜色设置相同)。当我们为第三本文本设置“无”值时，它是在默认参数中渲染的。

以不同字体合成值呈现的文本CSS

字体堆栈##

字体堆栈是指级联样式表(CSS)定义为后备选项的字体列表，如果特定字体在用户的设备或系统上失败或不存在。他们确保网络设计人员可以在不同平台和浏览器上保持排版的一致性。

为了指定CSS中的字体系列，通常以偏好顺序列出多个字体来定义字体堆栈。如果第一个选项不可用，则浏览器将尝试使用堆栈中的下一个选项，直到找到工作选项为止。

让我们来看看一个字体堆栈的示例，用于指定CSS中的字体家庭。在这里，堆栈开始的首选字体是“ Helvetica Neue”。如果不可用，浏览器尝试的下一个选项将是“ Arial”。如果“ Arial”也失败，则浏览器将落回到通用的sans-serif字体上。

1    font-family: "Helvetica Neue", Arial, sans-serif;

指定一个通用字体系列，例如“ sans-serif”，“ serif”或“ Monospace”，作为字体堆栈中的最后一个选择，被认为是好的实践。它确保浏览器将始终具有合适的后备字体以显示，以防万一没有首选字体可用。

网络安全字体

网络安全字体(也称为系统字体或默认字体)是各种操作系统和设备中常用的字体集合的集合。它们被认为可以安全地用于网络设计，因为它们得到了广泛的支持，并且很可能会在用户设备上存在。

在网络开发的早期，由于不同系统的字体可用性可变性，设计人员的字体选项有限。结果，他们依靠广泛安装在大多数计算机上的一组核心字体。

以下是一些著名的网络安全字体的例子：

Arial
Helvetica
Times New Roman
Georgia
Courier New
Verdana
Tahoma
Trebuchet MS

它们通常被称为“后备字体”，并在字体堆栈中指定，因为如果没有首选字体，它们被认为是安全的选择。

但是，随着Web技术的进步以及通过Google字体和Typekit等服务广泛使用自定义字体，对Web-Safe字体的依赖已减少。现在，网页设计人员具有更大的灵活性和更广泛的字体，以增强其网站的视觉吸引力。

如何在CSS中使用外部字体？

要在CSS中使用外部字体，您可以使用 @font-face规则。它允许您指定自定义字体，并使其可以在网页上访问。让我们看一下如何在CSS中使用外部字体：

获取字体文件：

以所需的 FONT格式(例如Woff，Woff2，TTF或EOT)查找文件。
您可以从Google字体(例如Google字体)中获取字体文件，也可以从任何可靠的来源购买/下载它们。

上传字体文件：

将字体文件上传到您的项目中的Web服务器或指定文件夹。

定义 @font-face规则：

在CSS文件中执行此操作，以指定字体家族名称并提供字体文件的路径，指定字体文件及其各自格式的路径。包括多种格式以支持不同的浏览器。

这是这样一个操作的示例：

1    @font-face {
2        font-family: 'MyCustomFont';
3        src: url('path-to-fonts/MyCustomFont.woff2') format('woff2'),
4            url('path-to-fonts/MyCustomFont.woff') format('woff');
5        /* Add additional formats if available */
6    }

应用字体：定义 @font-face规则时，可以通过在下面的示例中指定CSS规则中的字体家庭属性来使用自定义字体。在这里，名为“ mycustomfont”的自定义字体应用于身体元素。如果“自定义字体”不可用，则浏览器将倒入通用的sans-serif字体。

1    body {
2        font-family: 'MyCustomFont', sans-serif;
3    }

在不同的浏览器和设备上测试和验证网页。

关于响应式排版的几句话

响应式排版是在网站上设计和实施版式的实践，因此它可以调整和适应不同的屏幕尺寸和设备。它涉及考虑字体尺寸，线长度和间距等因素，以优化不同屏幕尺寸和方向上的阅读体验。

以下是响应式排版的一些关键方面：

响应式排版不是使用固定字体尺寸，而是采用相对单位(例如百分比，EMS或REMS)来根据屏幕尺寸或视口维度按比例缩放文本。
响应式排版通常与媒体查询一起实现，这可以根据特定的屏幕宽度或设备功能对字体样式进行改编。这允许针对不同断点进行自定义的印刷调整。
CSS视口单元，例如大众(视口宽度)和VH(视口高)，用于相对于视口的尺寸大小字体。此方法可确保字体大小在用户调整浏览器窗口或在设备之间开关时会平滑适应。
响应式排版认为可读性的最佳线长长度(每行字符数)。较大屏幕上的较长线可以通过调整边距或应用最大宽度来管理。此外，仔细考虑线高(线之间的垂直间距)，以避免狭窄或过度间隔的文本。
在较小的设备上的屏幕空间有限的情况下，建立清晰的印刷层次结构很重要。设计师需要确保将标题，子标题和身体文本适当区分以易于阅读。
通过考虑文本和背景之间的对比度来确定可访问性的优先级，为视觉障碍的用户提供足够的间距，并允许灵活的字体尺寸调整以适应不同的用户偏好。

结论

CSS字体是开发与CSS的接口的关键块之一。大多数网页的大多数内容都是文本内容，因此如果不学习此属性，该内容将永远不会具有高质量的外观。它的可读性，可伸缩性等将较小。

有些属性可以轻松应用于任何字体，但有些属性需要支持该属性变体的特殊字体。例如，Inconsolata 字体有 8 种字体粗细变体，而大多数字体只能使用“普通”或“粗体”。如果您想用某种字体，但设备上没有，您可以尝试从 Aspose 的免费网页应用程序中查找并下载。此外， 字体查看器 会为您提供开发过程中可能需要的字体信息。

什么是字形字体格式

CSS字体

CSS字体

CSS字体属性

CSS字体家庭

CSS字体重量

CSS字体拉伸

CSS字体样式

CSS字体尺寸

CSS字体

CSS字体合成

字体堆栈##

网络安全字体

如何在CSS中使用外部字体？

关于响应式排版的几句话

结论

Have any questions about Aspose.Font?