Tailwind CSS - 字型平滑

上一個
下一個

字型平滑 在 Tailwind CSS 中透過使用預定義的類調整文字的外觀來使文字更平滑，從而改善網頁上的文字外觀。

Tailwind CSS 字型平滑類

下面列出了指定不同字型平滑選項的 Tailwind CSS 類。

類 CSS 屬性
antialiased -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
subpixel-antialiased -webkit-font-smoothing: auto;
-moz-osx-font-smoothing: auto;

Tailwind CSS 字型平滑類的功能

  • antialiased: 此類使用抗鋸齒技術平滑螢幕上的文字邊緣，從而提高文字清晰度。
  • subpixel-antialiased: 此類調整螢幕上每個畫素顯示文字的方式，以使用亞畫素抗鋸齒技術獲得更平滑的外觀。

Tailwind CSS 字型平滑類示例

以下是 Tailwind CSS 字型平滑類的示例，它們透過使用預定義的類調整字型渲染方式，在網頁上建立更平滑、更清晰的文字。

用於抗鋸齒和亞畫素抗鋸齒字型平滑的 Tailwind CSS

此示例使用 Tailwind CSS 為兩個段落設定樣式，顯示不同的字型平滑技術，這些技術調整字型在網頁上的渲染方式。

<!DOCTYPE html>
<html lang="en">
<head> 
   <script src="https://cdn.tailwindcss.com"></script>
</head>
 
<body class="p-4">
    <h1 class="text-2xl font-bold mb-4">
        Tailwind CSS Font Smoothing
    </h1>  
    <p class="underline">Using antialiased font</p>
    <p class="antialiased text-lg mb-4">
        This text uses antialiased font smoothing.
    </p>
    <br>
    <p class="underline">Using subpixel anti-aliasing</p>
    <p class="subpixel-antialiased text-lg">
        This text uses subpixel anti-aliasing
        for font smoothing.
    </p>
</body>

</html>
列印頁面
上一個
下一個
廣告