Tailwind CSS - 字体样式

在 Tailwind CSS 中控制字体样式

Tailwind CSS 提供了简单直接的实用工具类来控制文本的 font-style 属性。这些类使您能够轻松应用或移除斜体样式，这对于强调和呈现设计都至关重要。

核心字体样式实用工具类

字体样式的两个主要类是 italic 和 non-italic。

Class	CSS Properties
italic	font-style: italic;
non-italic	font-style: normal;

语义与表现：何时使用 italic

虽然 italic 类易于应用，但考虑 HTML 语义非常重要。对于需要语义强调（即改变句子含义）的文本，通常最好使用 <em> 标签。italic 类最适合用于纯粹的样式呈现，其中斜体化不会改变核心含义。

• 使用 <em>：您*必须*完成此任务。（强调对于含义至关重要）。浏览器默认将 <em> 渲染为斜体。
• 使用 <i>：术语 *Homo sapiens* 是拉丁语。（用于外语词汇、技术术语等）。
• 使用 .italic 类：用于纯粹的样式选择，例如为大型引用块（blockquote）设置样式，其中斜体样式是设计的一部分，而非语义强调。

实际应用：为引用块设置样式

此示例演示了 italic 和 non-italic 类在为推荐语或引用块设置样式时的常见且恰当的用法。

示例：推荐语组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind CSS Font Style Demo</title>
    <link href="/dist/output.css" rel="stylesheet">
</head>
<body class="bg-slate-100 flex items-center justify-center min-h-screen p-4">

    <figure class="max-w-2xl bg-white p-8 rounded-xl shadow-lg">
        <!-- 主要引文使用 `italic` 类进行样式呈现 -->
        <blockquote class="text-2xl font-medium text-slate-800 italic">
            <p>“Tailwind CSS is the only framework that I've seen scale on large teams. It’s easy to customize, adapts to any design, and the build size is tiny.”</p>
        </blockquote>
        <figcaption class="mt-6">
            <!-- 引文作者的姓名 -->
            <div class="text-sky-600 font-semibold">
                Sarah Dayan
            </div>
            <!-- 引文来源，使用 `non-italic` 样式来覆盖任何可能继承的斜体化 -->
            <div class="text-slate-500 non-italic">
                Staff Engineer, Algolia
            </div>
        </figcaption>
    </figure>

</body>
</html>

使用变体进行条件样式设置

您可以将字体样式实用工具类与 hover、focus 或 group-hover 等变体结合使用，以创建交互式效果。这是 Tailwind 实用工具优先方法的一个强大功能。

<!-- 当带有 `group` 类的父 `div` 被悬停时，文本变为斜体 -->
<div class="group">
    <p class="group-hover:italic text-gray-600">
        Hover over me to see the effect.
    </p>
</div>

<!-- 链接在悬停时变为非斜体 -->
<a href="#" class="italic hover:non-italic">A styled link</a>

斜体 vs. 伪斜体：关于字体加载的说明

italic 实用工具类应用 font-style: italic。如果您使用的字体家族具有专用的斜体字体文件（例如 Inter-Italic.woff2），浏览器将使用它。如果没有，浏览器将通过倾斜正常字体来创建“伪斜体”，这被称为 oblique 样式。为了获得最佳视觉质量，请确保您加载了自定义字体的真正斜体变体。