如何使用流式排版實現WordPress自由縮放字型

讓文字在所有螢幕上都呈現良好的效果並非易事。長期以來，網頁設計師一直使用媒體查詢斷點來調整字型大小，但隨著裝置和螢幕尺寸的不斷增加，這種方法很快就會變得混亂不堪。

從 WordPress 6.1（2022 年 11 月釋出）開始，我們擁有了一種更好的方法：流式排版。它會自動調整 theme.json 檔案中定義的字型大小，使其平滑縮放，不受螢幕寬度或高度的影響。

這項功能不僅可以改變字型大小，還可以微調行高、字間距，甚至留白，從而使您的設計在所有裝置上都更加一致、易讀且易於訪問。

流式排版並非什麼新事物，早 23 年我們就與大家一起分享過關於“為響應式設計應用流體排版（Fluid Typography）”，大家也可以回顧下內容。

本文將解釋流式排版的工作原理、它與傳統斷點的區別，以及如何使用 theme.json 和 CSS 在 WordPress 中實現它。

但首先，讓我們回顧一下過去是如何處理排版的，以及為什麼流式排版是一項如此重大的改進。

斷點排版 vs. 流式排版

理解流式排版（fluid typography）的一個好方法是將其與斷點排版（breakpoint typography）進行比較。斷點排版使用媒體查詢來針對特定裝置的螢幕寬度調整字型大小。

斷點排版

通常，斷點是指視口寬度的特定範圍，通常以畫素為單位。一種常見的做法是設定三個主要斷點，分別針對移動裝置、筆記型電腦和桌上型電腦螢幕。

以下是 CSS 檔案中針對筆記型電腦的典型斷點設定：

@media (min-width: 48em) and (max-width: 74.9375em) {
body {
font-size: 1.125rem;
line-height: 1.6;
}
h1 {
font-size: 2rem;
}
}

雖然這種方法可行，但它有一個主要缺點：隨著新裝置和螢幕尺寸的出現，管理所有這些斷點很快就會變得難以維持。

演示字型如何在斷點之間平滑縮放

在上面的示例 GIF 中，隨著視口縮小，文字大小會以不均勻的跳躍方式調整。這種“階梯式”行為通常會導致縮放效果不佳或難以預測，這對於平滑一致的字型效果來說並不理想。

流式排版

隨著 2019 年 CSS clamp() 屬性的引入以及視口單位（vw 和 vh）的出現，無縫自動縮放成為可能。

這些屬性允許您定義根據視口尺寸動態縮放的字型大小，從而無需設定多個斷點。

以下是使用 clamp() 實現中等字型大小的示例：

.has-medium-font-size {
font-size: clamp(1rem, 1rem + 0.5vw, 1.25rem);
}

稍後我們將更詳細地瞭解 clamp() 的工作原理，但現在，您可以將其視為一個設定最小、首選和最大字型大小的公式，以確保文字在螢幕上平滑縮放。

流式排版效果演示

在這個 GIF 動畫中，隨著視口變窄，文字會流暢地調整大小，不會出現跳躍或突然的縮放。

這種流暢的動態效果正是流式排版相較於基於斷點的設計的一大進步。它無需逐步調整文字，即可實現無縫縮放，確保在任何裝置上都能獲得自然流暢的體驗。

但流暢的縮放僅僅是開始。流式排版還提供了其他諸多優勢，讓構建靈活、一致且易於訪問的設計變得更加輕鬆。

流式排版的優勢

在使用流式排版的過程中，您將會逐漸體會到以下優點：

預設響應式

文字會隨視口自動縮放，無需設定斷點。無論使用者是在手機、平板電腦還是超寬顯示器上瀏覽您的網站，字型大小都會自然調整，無需額外的 CSS 程式碼。

更易於維護

無需編寫多個媒體查詢，您的程式碼將保持簡潔易讀。您可以使用簡單的“T恤”尺寸縮放比例來定義字型大小，從小號到特大號，並將其在整個主題中保持一致。

一致的設計

確保您的字型大小在整個網站中保持一致，無論是在全域性範圍內還是在需要時在各個模組內部。只需定義一次縮放比例，它就能無縫地應用於所有模組、圖案和模板。

提升可訪問性和可讀性

由於流式排版能夠平滑縮放，文字始終以適合各種裝置的可讀大小顯示。這使得您的內容更易於訪問，尤其對於有視覺偏好或自定義瀏覽器縮放級別的使用者而言。

面向未來的設計

由於文字大小不再與人為的斷點繫結，因此您的字型縮放比例保證適用於任何未來的螢幕尺寸和視口。

控制縮放速度

您可以控制文字放大或縮小的速度，該速度由一個隨視口寬度變化的首選值來設定。

瀏覽器支援

clamp() 函式在所有現代瀏覽器中都得到良好支援，包括最新版本的 Chrome、Edge、Firefox 和 Safari。

但是，如果您需要 100% 的相容性，仍然需要為舊版瀏覽器（例如 Internet Explorer 11 以及 2020 年之前的 Safari 和 Chrome 版本）提供備用方案。

以下是具體操作方法：

/* Fallback (for IE11 and other old browsers) */
li {
font-size: 1.25rem; 
}
/* Preferred (modern browsers) */
li {
font-size: clamp(1rem, 1rem + 0.5vw, 1.5rem);
}

溫馨提示：始終將備用方案放在現代宣告之前。現代瀏覽器會忽略舊版本，並自動應用 clamp() 值，從而確保流暢執行，無需額外條件。

流式排版的工作原理

流式排版的核心在於三個設定：最小尺寸、最大尺寸和首選尺寸。首選尺寸是一個介於最小值和最大值之間的滑動條，由視口寬度決定。

clamp() 函式在一個宣告中使用了這三個值：

font-size: clamp(min, preferred, max);

這樣可以確保文字在小螢幕上不會太小，在大螢幕上也不會太大。例如：

font-size: clamp(1rem, 1rem + 0.5vw, 1.25rem);

在這個例子中，字型大小從 1rem 開始，隨著視口的擴大而平滑增長，並在達到 1.25rem 時停止增長。

WordPress如何處理字型大小

WordPress 會為您完成繁重的計算工作。您無需手動計算這些值，可以直接在 theme.json 檔案中定義字型大小。

以下是一個簡化的示例，展示了 WordPress 如何在 JSON 中表示字型大小：

{
"fluid": {
"min": "1rem",
"max": "1.25rem"
},
"name": "Medium",
"size": "1.125rem",
"slug": "medium"
}

WordPress 會由此自動生成 CSS：

font-size: clamp(1rem, 1rem + 0.5vw, 1.25rem);

這使得實現流式排版變得快速、一致且無誤。您只需在 theme.json 檔案中定義一次值，WordPress 就會自動處理計算。

常用術語

在繼續之前，讓我們回顧一下流式排版中使用的一些關鍵單位。每個單位都是相對於其他單位進行縮放的。

關於theme.json的幾點說明

theme.json 是資料驅動的，因此它會自動生成 CSS，無需手動編寫。

正如您所預期的，WordPress 核心包含一個 theme.json 檔案，用於設定區塊主題自身 theme.json 檔案所使用的基礎屬性。WordPress 實現流式排版的方式也是如此。

與幾乎所有樣式屬性一樣，這些屬性可以全域性更改，也可以使用子主題針對每個區塊進行更改，我們建議所有自定義操作都使用子主題。

如果您不熟悉 theme.json，我們強烈建議您閱讀我們的文章“在 theme.json 中使用屬性和鍵值對”。

如何在TT5（Twenty Twenty Five）主題中使用流式排版

當區塊主題的 theme.json 檔案包含設定 "fluid": true 時，WordPress 會自動使用 CSS 的 clamp() 函式生成流式排版規則。這是透過一個內建演算法實現的，該演算法會計算每個字型大小的平滑縮放。

{
"settings": {
"typography": {
"fluid": true
}
}
}

如果省略 "fluid"，WordPress 預設設定為 false，這意味著文字大小將保持固定，不會自適應縮放。

啟用自適應排版後，TT5 定義了五種預設字型大小。每種字型大小都包含最小值和最大值，WordPress 會使用這些值透過 clamp() 函式生成最終的 CSS 樣式。

溫馨提示：TT5 明確為小字號設定為 "fluid": false，因此它不會縮放。

實際說明

現在我們瞭解了 TT5 預設如何處理流式字型，接下來讓我們看看一些實際應用場景，在這些場景中您可能需要自定義或擴充套件流式字型。

在這些示例中，我們將使用 TT5 子主題，並且一如既往，請確保您的指令碼已正確載入到佇列中。

將所有字型大小增加25%

如果您的受眾更喜歡大字型（例如，在注重無障礙訪問或面向老年人的網站上），您可能需要全域性增加所有字型大小。

選項 1 — 使用theme.json檔案

雖然沒有可以一鍵縮放所有字型的開關，但您可以手動將每個字型大小增加 25%。以下是一個配置示例：

"typography": {
"fontSizes": [
{
"fluid": false,
"name": "Small",
"size": "1.09375rem",
"slug": "small"
},
{
"fluid": { "max": "1.40625rem", "min": "1.25rem" },
"name": "Medium",
"size": "1.25rem",
"slug": "medium"
},
{
"fluid": { "max": "1.71875rem", "min": "1.40625rem" },
"name": "Large",
"size": "1.725rem",
"slug": "large"
},
{
"fluid": { "max": "2.5rem", "min": "2.1875rem" },
"name": "Extra Large",
"size": "2.1875rem",
"slug": "x-large"
},
{
"fluid": { "max": "3.75rem", "min": "2.6875rem" },
"name": "Extra Extra Large",
"size": "2.6875rem",
"slug": "xx-large"
}
]
}

這遵循 TT5 的模式：小尺寸保持不變，而其他尺寸則平滑縮放。

在後臺，WordPress 仍然會計算每個最小值和最大值之間的首選（自適應）值。

選項 2 — 使用style.css檔案

或者，您可以使用樣式表中的一行程式碼來全域性縮放所有元素：

:root {
font-size: 125%;
}

這將根字型大小增加 25%，從而有效地縮放所有使用 rem 單位的元素。

單個區塊的自定義流式字型

您還可以選擇性地應用流式字型大小。

例如，要使所有列表項（ core/list ）使用中等大小而不是預設的大號，請將以下內容新增到您的 theme.json 檔案中：

"styles": {
"blocks": {
"core/list": {
"typography": {
"fontSize": "var:preset|font-size|medium"
}
}
}
}

這樣就形成了一個更清晰的層級結構，列表項顯示的文字比段落顯示的文字略小。

單個流式排版區塊

在style.css中設定流式排版

如果您使用的是經典主題，則可以直接在 style.css 中定義 clamp() 值。

例如，以下是如何將列表項的字型大小增加到大字型大小的 125%：

li {
font-size: clamp(1.725rem, 1.725rem + 0.17vw, 1.71875rem) !important;
}

使用流式排版

這會為 CSS 檔案中設定的列表項顯示更大的字型。正如您所預期的，如果您使用的是經典主題，則需要在 styles.css 檔案中使用 clamp() 屬性。

流式間距

字型只是使用流式排版時需要考慮的因素之一。

內邊距、外邊距和塊間距（組塊內部的空間）的尺寸也可以使用與流式排版相同的概念進行平滑縮放。

TT5 使用這些設定來確定間距大小。

"spacing": {
"defaultSpacingSizes": false,
"spacingSizes": [
{ "name": "Tiny", "size": "10px", "slug": "20" },
{ "name": "X-Small", "size": "20px", "slug": "30" },
{ "name": "Small", "size": "30px", "slug": "40" },
{ "name": "Regular", "size": "clamp(30px, 5vw, 50px)", "slug": "50" },
{ "name": "Large", "size": "clamp(30px, 7vw, 70px)", "slug": "60" },
{ "name": "X-Large", "size": "clamp(50px, 7vw, 90px)", "slug": "70" },
{ "name": "XX-Large", "size": "clamp(70px, 10vw, 140px)", "slug": "80" }
]
}

前三個尺寸（tiny、xsmall、small）是固定的，而較大的尺寸則使用 clamp() 函式進行平滑縮放。

這確保了不僅文字，而且佈局間距也能優雅地適應不同的螢幕尺寸。

小結

斷點和流式排版各有用途。當它們結合使用時，可以建立向前相容的佈局，使其在各種螢幕上平滑縮放，從而為所有人提供一致且易讀的體驗。

如果您不想手動計算，可以使用以下幾款免費工具來微調和視覺化您的數值：

• Modern Fluid Typography Editor
• Fluid Typography Calculator

這些工具可以輕鬆生成符合您設計比例的 clamp() 值，尤其適用於經典主題的開發。