字體大小

相信大家以往在寫 CSS 時，也有寫過像這種 text-12、font-12 看起來很聰明的蠢事吧！其實這是不太好的寫法，相對也會造成 CSS 肥大的負擔。最好的方式是像 Bootstrap 使用 fs-1、fs-2，或是像 Tailwind 使用 text-{size} 來控制字體大小。

Tailwind 內建已定義了常見的13組文字級距，而 base 就是大家所熟悉的 16px，文字間也幫咱們設定了相應的行高，讓文字不會上下黏在一起。來看看官方標配的大小有哪些？基本上現代框架都已使用 rem，威爾豬這邊幫大家轉換整理成孰悉的 px。

你們看看，是不是都是大家常用的文字大小。當然如果級距不夠，想在新增的，開啟 tailwind.config.js 吧，在 theme 的 extend 底下加入 fontSize，並在裡面寫入想增加的級距，範例如下:

// tailwind.config.js

module.exports = {
  theme: {
    ... ,
    extend: {
      fontSize: {
        'text-10xl': '10rem',
      },
    },
    ... ,
  },
  ... ,
}

其實威爾豬覺得大部分專案都已適用，如果真的有少部分特殊的文字尺寸，還記得前幾篇的 JIT 模式吧，不妨直接使用 text-[設定尺寸] 會比較方便。

但如果設計師還是覺得預設的字距跟行高 Not good，不能搭配出這高大上的版面，那我們就再進入 tailwind.config.js 來修改吧，一樣方式為 theme 底下加入 fontSize，並在裡面寫入想修改的尺寸，範例如下:

// tailwind.config.js

module.exports = {
  theme: {
    ... ,
    fontSize: {
      '2xl': ['24px', {
        letterSpacing: '-0.01em',
      }],
      '3xl': ['32px', {
        letterSpacing: '-0.02em',
        lineHeight: '40px',
      }],
    },
    ... ,
  },
  ... ,
}

如果只單寫其中一個，代表另一個將使用官方預設的字距跟行高。

字體粗細

以往 Bootstrap 所用的是 font-weight-bold，嗯～果然簡單粗暴易明瞭，新版改為 fw-bold，寫法相對簡潔，不過基本也就那四種粗細，但在 Tailwind 的世界裡，胖瘦居然分了九種，從 100-900 把 CSS 有的通通吐給你，下面為預設粗細的寫法對照:

字體樣式

• 斜體
  寫法方式很簡單，就只有分 italic、 not-italic。很神奇，居然沒有使用其它框架愛用的 normal。

• 下底線、刪除線
  不囉嗦，就是 underline、no-underline、line-through，依然沒有 normal。

• 大小寫及首字大寫轉換
  使用方式 uppercase、lowercase、capitalize、normal-case。

字母間距

Tailwind 間距的預設 class 寫法和 CSS 及一般框架有點不同，是使用 tracking-，而不是我們所熟悉的 ls- 或是 letter-spacing-，其實威爾豬也記不太起來，沒關係，等需要用時再來查找威爾豬這篇就好了。

這邊注意官方預設用的是 em。

當然你也可以到 tailwind.config.js 的 theme 裡的 letterSpacing 去新增或修改預設的數值：

  // tailwind.config.js
  
 module.exports = {
  theme: {
    ... ,
    letterSpacing: {
      tightest: '-0.075em',
      tighter: '-0.05em',
      tight: '-0.025em',
      normal: '0',
      wide: '0.025em',
      wider: '0.05em',
      widest: '0.1em',
    }
    ... ,
  },
  ... ,
}

文字行高

這個 class 的預設寫法和間距一樣，威爾豬也很容易忘，在 Bootstrap 是寫 lh-，Tailwind 這邊要用 leading- 的方式， 它分為兩種方式：相對行高、固定行高。

• 相對行高：這個可以依據現在文字的大小，來給它一個適當的配適，Bootstrap 和一般用的文書軟體也都是使用這種方式 (如：1.5 倍行高)，威爾豬大部分也是使用這種。

• 固定行高：這個方式是不考慮當前文字的大小，直接給一個固定的值。要注意寫法後面的值是 3-10，和之前的 100-900 不同。

當然你想增加行高也是可以的，一樣要到 tailwind.config.js，在 theme 的 extend 裡加入 lineHeight，範例如下：

  // tailwind.config.js
  
 module.exports = {
  theme: {
    ... ,
    extend: {
      lineHeight: {
         'leading-looser': '2.5',
         '12': '3rem',
      }
    }
    ... ,
  },
  ... ,
}

前面的屬性依然可以自定 (如：'extra-xl')，只要別人看得懂就好，這邊分別寫了 2 種寫法。

文字顏色

在顏色那篇有稍微提到使用文字顏色的方式：text-{顏色}-{明度 (50-900)}。這邊要多說另外 2 種使用的 class：

• 透明色：text-transparent
  可想而知就是讓文字透明，類似 text-opacity-0，不過不一樣的地方是，不需像 opacity 一樣前面需要加入顏色，因為透明本來就屬於顏色的一種。

• 當前顏色：text-current
  這個會往父層找你設定使用的顏色，如果沒有，那它會再往祖父層來繼承，如果啥顏色都沒有，那它就會使用瀏覽器預設的顏色，這方式適合為同一組件父層設定顏色變量。

文字透明度

使用方式為 text-opacity-{amount}，不過要記住使用透明度前，一定要有顏色哦。預設數值為下表：

如果想增加透明度，開啟 tailwind.config.js，在 theme 的 extend 裡加入 opacity，範例如下：

  // tailwind.config.js
  
 module.exports = {
  theme: {
    ... ,
    extend: {
      opacity: {
         '15': '0.15',
         '35': '0.35',
         '45': '0.45',
      }
    }
    ... ,
  },
  ... ,
}

如果只想增加文字的透明度，其他背景、邊框等都不需要，那就將 opacity 改成 textOpacity 就好了：

  // tailwind.config.js
  
 module.exports = {
  theme: {
    ... ,
    extend: {
      textOpacity: {
         '15': '0.15',
         '35': '0.35',
         '45': '0.45',
      }
    }
    ... ,
  },
  ... ,
}

文字平滑度

什麼！文字也有平滑度，相信這個應該不少人都很陌生吧，威爾豬也只有在專案上用過一次，因為螢幕使用的是像素，難免會有鋸齒狀，這個可以讓文字看起來更細膩，通常只用在 Mac OS，基本上一般人沒比較過是無感的，只有那種天生鷹眼的設計師有感。有需要的人就使用吧，用不到就當冷知識好了。使用的 class 也不太好記：antialiased 和 subpixel-antialiased

• antialiased (灰度渲染)：常用在 iOS 和 Android 等移動設備。
• subpixel-antialiased (次像素渲染)：常用在 Mac OS 和 MacType For Windows。

這個坑太深了，有需要的同學們再自行科普。

以上就是今天文字使用的方式，還有一些威爾豬想放在後面的篇幅一起講，那咱們明天見。