[12th 鐵人賽] 這不是 font-size, Day 17

關於文字流

前幾天都提到了關於尺寸的事情，主要都圍繞在 Media Query 與 Grid, Flex 的容器「尺寸」的議題上。我們今天回到一開始的初衷，所謂的「內容為王」這件事情上面。

無論你是使用 RWD, AWD 還是 WD-40，其實免不了的都得考量到文字區塊這件事情。而我們比較常見的操作方式，大抵上都是在每一個斷點（@media）來設計相關元件的文字顯示方式。舉凡，

• 修改文字大小以符合區塊。
• 將文字隱藏或是截斷。
• 變更容器流向設計，用以符合文字展示。
• 直接輸出 JPG，因為我沒有那個字體。

所以，我們比較常見到的相關設定就會有這些：

• font-size
• font-weight
• word-break
• line-break
• letter-spacing
• word-spacing
• overflow-wrap
• white-space

關於上述這些東西，我這邊先推薦 Amos 的系列教學，所以我就不贅述了。

請叫我甩鍋王。

在各種尺寸的設計上，通常我們會遇到幾個難題，

• 你手機的字怎麼那麼小。
• 我手指超肥的按不到你的文字。
• 這個 12px 太大了，我要 8px 的文字就好。
• 你這網站用我爸的手機不能看好爛。

那我們要怎麼面對「文字尺寸」這件事情？我們先來看比較一般的例子，

:root {
    --font-base-size: 10px;
    font-size: calc(var(--font-base-size) * 1);
}
body {
    font-size: 1rem;
}

一般來說，我們的根元件（:root）所預設的文字尺寸是 16px，上面的例子是使用 10px 這一點我想應該很明顯。好的，接下來我們都會全程使用 rem 來當作單位，這個單位是參考根元件的文字尺寸，上面會使用 10px 是方便我們計算（不好意思，我國小乘法比較弱，所以十進位我不用去按計算機）。

.article h1 {
    font-size: 4rem;
}
.article p {
    font-size: 1.6rem;
}

假設我們在行動裝置上，歐不，範圍限縮一點，在一般 5.8 吋螢幕尺寸左右的手機上，或者在 iPhoneX 上，上面內文的設定字級為 16px，而標題設定字級為 40px。看起來好像很大，實際上你在手機上看，你可能也會覺得很大。那麼，我們可以稍微縮小，然後在其他的裝置上再慢慢的放大。

這樣就會變成，

.article h1 {
    font-size: 2rem;
}
.article p {
    font-size: 1.4rem;
}

@media (min-width: 48rem) {
    .article h1 {
        font-size: 2.8rem;
    }
    .article p {
        font-size: 1.5rem;
    }
}

@media (min-width: 76.8rem) {
    .article h1 {
        font-size: 3rem;
    }
    .article p {
        font-size: 1.6rem;
    }
}

@media (min-width: 102.4rem) {
    .article h1 {
        font-size: 4rem;
    }
    .article p {
        font-size: 1.6rem;
    }
}

你不覺得這樣寫起來 超充實 浪費時間的嗎？不過有種情況例外，

我今天 commit 了 300 行 CSS 我超強。

好的，今天就是要來節省大家的時間，上面的設定可以約略換成：

.article h1 {
    font-size: clamp(2rem, 5 * (1vw + 1vh) / 2, 4rem);
}
.article p {
    font-size: clamp(1.4rem, 5 * (1vw + 1vh) / 2, 1.6rem);
}

什麼？這樣我一大堆 @media 不就要砍掉了？這樣我的 Commit 行數只剩四行產能不夠啊！

你走開，我暫時不想跟你講話。

clamp 方法

首先，這個方法目前在 w3c 還是屬於 WD 階段，但實際上去 caniuse.com　查詢的結果，高達 95.37% 的支援度，應該是可以放心使用的沒有關係。

再來，我們來看看這個方法實際上的定義，

clamp(<最小文字尺寸>, <計算尺寸>, <最大文字尺寸>);

好的，看起來比較多問題的會是那個 <計算尺寸> 到底是要計算什麼東西？又是拿什麼標準來計算？我們舉一個比較沒那麼複雜的例子，

.article p {
    font-size: clamp(1.4rem, 3vw, 1.6rem);
}

• 首先，字體尺寸會以 1.4rem 為基準。
• 在以 3vw 為計算尺寸下小於 1.4rem 就會採用 1.4rem 為文字大小。
• 在以 3vw 為計算尺寸下大於 1.6rem 就會採用 1.6rem 為文字大小。
• 若介於 1.4rem 與 1.6rem 中間，則會動態計算出文字大小。

接著，大家應該會有疑問，那個 3vw 到底是多少？

如果你不知道這個相對尺寸怎麼計算，放心我不會告訴你的

當然，雷點也是要提醒一下，

.article p {
    /* 請不要這樣做 */
    font-size: clamp(2rem, 3vw, 1.6rem);
}

如果你把最大與最小的地方寫反，那他就會永遠渲染你給他的 <最小文字尺寸>，以上述的例子，你的文字就會永遠都是 2rem。

由於這個方法是依照你所指定的 <計算尺寸> 來比對你的文字，而且文字的尺寸會是在你所設定的最大、最小區間內自動渲染。所以你無法很明確的定義，在什麼樣的尺寸下，一定要是哪一種文字尺寸。換句話說，他並不能完全取代 Media Query 指定文字尺寸的位置。

當你的客戶擁有像素眼的時候，寫個 1,800 行定義 p 的 CSS 給他！

所以說那個手機版

先祝大家中秋節快樂，然後我剛剛烤了幾片和牛還不錯吃。

大潤發就有賣～

所以大抵上，你不是很複雜的文字內容，然後要確保文字的顯示正確，那麼在 Media Query 當中，搭配 clamp() 的使用是相當適合的！當然，你想要做其他文字上的操作也是可以，只是，畢竟是計算尺寸，所以文字大小就不在前端設計師的掌控範圍內了，這一點就需要自行斟酌。