關於文字流

前幾天都提到了關於尺寸的事情,主要都圍繞在 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.4rem1.6rem 中間,則會動態計算出文字大小。

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

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

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

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

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

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

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


所以說那個手機版

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

和牛超棒的

大潤發就有賣~

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