Text Italic in CSS

字体类型

使用 CSS 的 font-style 属性，可以为字体家族中的字体设置常规、斜体或倾斜样式。

倾斜字体样式本质上是正常字体的倾斜变体，而斜体字体样式通常是手写的，并且比未样式化的对应字体需要更少的水平空间。当给定样式不可用时，会人为地倾斜常规字体的字形以模拟斜体和倾斜样式（使用 font synthesis 来修改此行为）。

CSS 语法

在设置 font-style 属性时，使用列表中的一个关键字；如果关键字是 oblique，也可以使用角度。

值

1. 正常

选择字体家族中被归类为常规的字体。

2. 斜体

选择属于斜体类别的字体。如果不可用，则使用倾斜字体变体代替斜体。如果不可用，则使用该样式的合成版本。

3. 倾斜

选择属于倾斜类别的字体。如果找不到斜体字体的倾斜变体，则使用斜体变体。如果不可用，则使用该样式的合成版本。

4. 倾斜 <角度>

选择一种倾斜字体，并添加一个角度来指示文本将如何倾斜。如果所选字体家族有一个或多个倾斜字体，则选择最接近给定角度的字体。如果没有倾斜字体可用，浏览器将通过以给定量倾斜常规字体来创建该字体的倾斜版本。接受 -90°C 到 90°C 之间的度数值。如果未指定角度，则使用 14 度。负值向行首倾斜，正值向行尾倾斜。

1. 对于请求 14 度或更高的角度，通常选择较大的角度；对于其他请求，则倾向于选择较小的角度（确切过程在规范的字体匹配部分有详细说明）。

5. 可变字体

使用可变字体可以精确控制倾斜字体的倾斜度。可以使用 oblique 关键字的 <angle> 修饰符来选择它。

使用值为 1 的 "ital" 变体来创建斜体值，而使用 "slnt" 变体来实现 TrueType 或 OpenType 可变字体中倾斜值的不同倾斜角度。请参阅 font-variation-settings。

注意：要使用下面的示例，您的浏览器必须支持 CSS Fonts Level 4，它允许将 <angle> 值传递给 font-style: oblique。示例使用 23 度倾斜字体类型加载。要观察文本倾斜度的变化，请调整值。

CSS 斜体化

CSS 是网页上突出文本的一种常用样式方法。这是通过使用 CSS 的 font-style 属性来实现的。虽然此属性有多种值，但我们使用 italic 值来使文本倾斜。

借助上面的代码，HTML 文档中的每个段落都将对其内容进行斜体化处理。

粗体排版的意义

在网站设计和内容展示方面，斜体化至关重要。它用于吸引对关键信息的注意，指示标题，或仅仅是提高网页的美观性。

然而，至关重要的是要谨慎使用此技术。过多的使用可能会导致用户界面拥挤和不清晰。

CSS 选择器和粗体类型

CSS 选择器用于添加斜体化到组件。可以通过 ID、类或类型来识别元素目标。

font-style 属性

您可以使用 CSS 中的 font-style 属性将字体设置为倾斜或斜体。此属性非常灵活，可以应用于 HTML 页面中包含文本的任何元素。

由于上面示例中的 font-style 属性被斜体化，HTML 文档中的所有 h1 文本都将被斜体化。

font-style 的值

font-style 属性有三个可能的值：normal、italic 和 oblique。

• Normal（常规）：这是默认值。它规定文本必须遵循标准样式。
• Italic（斜体）：根据此值，文本将显示为斜体。
• Oblique（倾斜）：此值指定文本的倾斜样式。
• font-style: oblique; p

由于上面示例中的 font-style 属性设置为 oblique，所有段落内容都将以倾斜方式呈现。

理解 CSS 特性对于使用 font-style 属性至关重要。浏览器将根据特性标准优先处理相互冲突的样式。最高级别的特性是行内样式，其次是元素类型、ID 和类。

将文本设置为斜体样式

在 CSS 中，将斜体样式应用于文本是一个简单的过程。使用 font-style 属性，并将其值设置为 italic。这可以内联应用于 HTML 元素，在 HTML 文本的 <style> 标签内，或在单独的 CSS 文件中。

上面示例中的 h3 文本都将以斜体显示。

斜体化特定元素

使用 CSS 选择器，您可以斜体化元素。这些选择器可以根据 ID、类型或类来定位元素。

在这种情况下，斜体化将仅应用于具有 class-name 类的组件。这使得可以更精确地应用斜体样式。

使用 CSS 类创建斜体

使用 CSS 类为 HTML 文本中的各种组件添加样式是一种非常有效的方法。它们允许您定义一次样式，并在任意数量的不同方面使用它。

上面示例中定义了 CSS 类 italic-text。应用于此类的任何 HTML 元素的文本将显示为斜体。

应用 CSS 类

您必须将类名包含在元素的 class 属性中，才能将 CSS 类应用于 HTML 元素。

在此示例中，通过使用 italic-text 类，段落文本将被斜体化。

多个 CSS 类

可以将多个类应用于 HTML 元素。这使您能够为一个元素混合多种样式。

在此示例中，由于将 italic-text 和 big-text 类应用于 italicized，文本将显得很大且斜体。在您的 CSS 中，large-text 类将在其他地方定义。

请记住，为了使您的代码更易于理解和维护，在使用 CSS 类时选择相关且描述性的类名至关重要。

行内 CSS 中的斜体文本

一种将样式直接应用于单个 HTML 元素的方法是行内 CSS。为此，将 style 属性添加到 HTML 标签中。

由于 font-style 属性直接在元素上设置为 italic，因此上面示例中的段落文本将显示为斜体。

何时使用行内 CSS

尽管行内 CSS 可能有助于快速进行一次性样式调整，但通常建议谨慎使用。这是因为行内样式在您的外部或内部样式表中将优先于任何冲突的样式，因为它们在 CSS 中具有最高的特性。

并非所有 CSS 属性都受行内 CSS 支持，这是其局限性之一。例如，不允许将行内样式与 :hover 或 :active 等伪类一起使用。此外，行内 CSS 的使用可能会导致代码重复和难以维护。

尽管存在这些缺点，任何 Web 开发人员都可以从学习使用行内 CSS 中受益。它可以快速测试样式而无需打开外部样式表，这非常有帮助。

使用 CSS 设置粗体和斜体文本

有时您可能希望调整多个字体属性。以下是如何使用 CSS 为您的页面添加粗体和斜体文本。

只需将 font-weight 设置为 bold，将 font-style 设置为 italic，就像我们所做的那样。