北京網站建設工作室百度的合作網站有哪些
當前內容所在位置（可進入專欄查看其他譯好的章節(jié)內容）
- 第四部分 視覺增強技術 ??
- 【第 12 章 CSS 排版與間距】 ??
- 12.1 間距設置
- 12.1.1 使用 em 還是 px
- 12.1.2 對行高的深入思考
- 12.1.3 行內元素的間距設置
- 12.2 Web 字體
- 12.3 谷歌字體
- 12.4 @font-face 的工作原理
- 12.4.1 字體格式與回退處理
- 12.4.2 同一字型的多種變體形式
- 12.5 性能因素考量
- 12.5.1 font-display 屬性解析
- 12.5.2 可變字體的用法
- 12.6 調整字間距，提升可讀性 ??
- 12.6.1 正文的字間距 ??
- 12.6.2 標題、小元素和間距 ??
- 12.7 本章小結 ??
文章目錄
- 12.6 調整字間距，提升可讀性 Adjusting space for readability
- 12.6.1 正文的字間距 Body copy spacing
- 12.6.2 標題、小元素和間距 Headings, small elements, and spacing
- 12.7 本章小結 Summary
《CSS in Depth》新版封面
譯者按
終于來到了本章的最后一節(jié)內容，首先恭喜那些和我一起一步一個腳印學到這里的朋友們。其實學到這里說一點都不累肯定是騙人的，因為這一章介紹了大量不怎么接觸到的知識，也是我平時大概率會跳過的內容；更何況學完還得在本地運行一下代碼，最后消化完每個章節(jié)的知識點還得結合第一版一字一句地完成新版內容的翻譯。這些細枝末節(jié)的東西如果想得太多，自己很可能就斷更了。之所以能更到第 78 篇，完全是因為我堅信當前所做的一切都是值得的。畢竟，誰能率先在當前心浮氣躁的大環(huán)境中沉下心來不斷深耕，夯實基礎，誰就能早一天迎來真正的曙光。愿共勉之。
12.6 調整字間距，提升可讀性 Adjusting space for readability
讓我們再回到頁面上。此時的 Web 字體 Roboto 和 Sansita 已加載完畢，我們可以按照設計稿再調整一下。這里涉及兩個屬性（properties）：line-height 和 letter-spacing。它們可以控制文本行之間的距離（垂直方向）和單個字符之間的距離（水平方向）。
很多開發(fā)者往往不太看重這兩個屬性。如果在頁面開發(fā)過程中多花點時間調整它們，整個網站的外觀都將得到顯著改善。除此之外，還可以讓用戶閱讀更加舒適，從而增加用戶黏性。
如果文字間距太過緊湊，多讀幾句話甚至多看幾個字都會明顯感覺費勁；要是間距過大也會有同樣的問題。圖 12.16 展示了多個不同間距的文字版本。
【圖 12.16 文字間距會對閱讀體驗產生顯著影響】
試著讀一下左上方的壓縮版文字，就會發(fā)現需要更加集中注意力才行。可能一不小心就漏掉一行或者重復閱讀同一行，而且很快就讀不下去了。這樣的頁面顯得擁擠不堪，毫無條理。而左下方的文字又過于分散了些，致使每個字母都占用了太多注意力，不太容易在大腦里組合成單詞。相比之下，右上方的文字就舒服多了，看上去“剛剛好”，是這三個版本中最容易閱讀的。
12.6.1 正文的字間距 Body copy spacing
為 line-height 和 letter-spacing 找到合適的值是件主觀性很強的事。最好的解決方案通常是多試幾個值；如果找到某兩個值一個過于緊湊、另一個過于松散，那就取介于二者之間的某個值。所幸，下面介紹的這些經驗法則可以為您提供幫助。
line-height 屬性的初始值（initial value）是關鍵字 normal，大概等于 1.2（確切的數值是在字體文件中編碼的，它們取決于字體的 em 大小）；但是在大部分情況下，這個值偏小。對于正文內容而言，行高介于 1.4 到 1.6 之間較為理想。
我們已經在上一章為 <body> 元素設置了 1.4 倍行高。這個值會被頁面中的其他元素繼承。試想如果沒有了這個行高值頁面會怎樣渲染。圖 12.17 展示了其中一個板塊的前后效果對比。在左側的版本中，line-height 和 letter-spacing 屬性均為初始值；而右側的版本是調整后的效果（我們的目標是把字間距調整為右側的版本）。
【圖 12.17 Ink 頁面的一個板塊效果對比，其中左側為原始的字間距效果，右側為手動調整后的效果】
把 line-height 的值改為 1.3 或者 1.5，看看效果如何。是不是比之前 1.4 倍行距的效果好一些。
提示
一段文字越長，行高也應該相應越大。這樣讀者的眼睛才更容易掃到下一行，而不會分散注意力。理想情況下，每行文字的長度應該控制在 45 至 75 個字符之間，一般認為這樣的長度最利于閱讀。
接著再來看看 letter-spacing 屬性。如果用的是精心設計過的字體，可能并不需要調整默認的字間距，但偶爾適當的調整也可以進一步提高可讀性，因此還是有必要帶您過一遍，看看如何進行修改。修改該屬性的另一個應用場景還可以是出于風格方面的考慮，對頁面上的某些位置（如按鈕或標題）進行微調。
letter-spacing 屬性需要一個長度值，用來設置每個字符間的間距。即使只設置 1px，也是很夸張的字間距了；因此它應該是一個非常小的值。在嘗試找到最佳屬性值的過程中，通常我會每次只增加 1em 的 1/100（例如 letter-spacing: 0.01em）。請根據代碼清單 12.12 同步更新本地樣式表中的字間距。
代碼清單 12.12 在 body 元素上設置字間距
@layer global {body {margin: 0;font-family: Roboto, sans-serif;line-height: 1.4; /* 行高和字間距將被頁面上的所有元素繼承 */letter-spacing: 0.01em; /* 在各字符之間再添加 0.01em 的字間距 */background-color: var(--extra-light-gray);color: var(--text-color);}
}
不妨嘗試將字間距增至 0.02em 或 0.03em，看看頁面效果如何。您可能不具備設計師的專業(yè)眼光，沒辦法確定哪種效果更好；但是沒關系，跟著感覺走就行了。如果還是有疑慮，那就保守一點，不要設置得太開。我們的目的不在于吸引用戶注意字間距，而是恰恰相反。在 Ink 頁面上，我發(fā)覺 0.01em 和 0.02em 看著都不錯，那就保守一點選用 0.01em。
把行距和字距轉換為 CSS 樣式
在設計領域，文本行之間的距離稱為 行距（leading），與單詞 bedding 諧音。它起源于印刷版每行文字之間添加的一條條鉛引導線。而字符之間的距離則稱為 字距（tracking）。如果與設計師一起工作，它們可能會在設計稿中指明行距和字距，但這些尺寸看起來和 CSS 中的
line-height和letter-spacing屬性完全不沾邊。行距一般以 “點（point）” 為單位進行描述，例如
18pt，代表的是一行文字的高度加上它與下一行文字之間的距離。這其實與 CSS 中的line-height類似，只不過沒有用不帶單位的數字來描述罷了。實際轉換時必須像定義字號那樣，先將行距轉為像素尺寸，然后再計算出對應的不帶單位的行高值。而要把
pt單位轉為px單位，需將pt值乘以1.333（因為 1 英寸為96px，并且 1 英寸也等于72pt，因此96 / 72 = 1.333px/pt）。因此18pt × 1.333px/pt = 24px。然后除以字號，就得到了不帶單位的行高值，即24px / 16px = 1.5。而字距（tracking）通常會給定某個數字，例如
100。因為一個單位的該數字表示1em的千分之一，因此除以1000就可以轉為em單位值，即100 / 1000 = 0.1em。
12.6.2 標題、小元素和間距 Headings, small elements, and spacing
標題的間距通常和正文內容不太一樣。正文間距調整好后，需要檢查一下標題，看看是否也需要調整。
標題一般比較簡短，通常只有幾個字，但即便偶爾才會遇到長標題，頁面樣式也應該考慮這種情況。在頁面設計時常犯的一個錯誤就是只測試短標題。既然頁面行高已經設定，就可以試著給各級標題添加文字內容，看看標題強制換行后的效果如何（如圖 12.18）。
【圖 12.18 讓標題強制換行，看看行高是否合適】
在本例中，由于垂直間距看上去還可以，這里就不做修改了。但檢查行高這一步絕不能少。有時候 1.4 倍行高可能會顯得有點寬，這也要看所選用的字型（typeface），尤其是設置大字號的時候。我曾經遇到過一些網站就是這樣的情況，最后不得不把標題的行高調低到 1.0。
而對于正文主體而言，調整間距的重點在于使用戶的閱讀體驗效果最佳。但對于標題以及其他內容偏少的頁面元素（如按鈕）來講，這一點影響不大。這時字間距的可調節(jié)范圍就大大增加了，也可以有更多發(fā)揮想象的空間了，甚至可以使用負的字間距來讓文字渲染得更加緊湊。例如圖 12.19 里的標語就聲明了 letter-spacing: -0.02em 的樣式。
【圖 12.19 頁面上內容簡短、風格鮮明的部分，可以考慮使用更為緊湊的字符間距】
上述樣式的間距變化還是很明顯的（dramatic）。如果是幾段文件都用這樣的間距樣式，閱讀起來就會很費勁；但對于小段文本效果還不錯（也就幾個字）。于是標題就按這個版本設置，并根據代碼清單 12.13 同步更新本地樣式表。
代碼清單 12.13 緊湊版標語的字間距設置
.hero h2 {margin-block: 0 10px;font-size: 1.95rem;letter-spacing: -0.02em; /* 利用負的 letter-spacing 來壓縮字間距 */
}
我們也可以重新評估一下頁面小型元素的間距和文本，例如按鈕。在我看來此時的按鈕看起來稍微偏大了些，尤其是頁頭的導航按鈕部分。我們來調整一下。圖 12.20 展示了現在的效果（上）以及調整后的效果（下）。
【圖 12.20 調整文本屬性可以改善導航按鈕的外觀】
這里做了如下調整：減小字號，使用 text-transform 把字母轉為大寫，并上調字符間距（letter spacing）。
提示
通常字母全部大寫的文字再配合較大的字間距，看上去效果會更好一些。
要實現上述效果，請將代碼清單 12.14 中帶注解內容的樣式聲明同步到本地樣式表中。
代碼清單 12.14 調整導航菜單項上的尺寸和間距樣式
.nav-container__inner {display: flex;justify-content: space-between;align-items: end; /* 令導航容器中的元素底部對齊 */max-inline-size: 1080px;margin-inline: auto;padding: 0.625em 0;
}....top-nav a {display: block;font-size: 0.8rem; /* 減小導航鏈接和按鈕的字號 */padding: 0.3rem 1.25rem; /* 將內邊距的值由 em 改為 rem */color: var(--white);background: var(--brand-green);text-decoration: none;border-radius: 3px;text-transform: uppercase; /* 將導航鏈接改為大寫 */letter-spacing: 0.03em; /* 增加字間距 */
}
因為調小了導航鏈接的字號，所以它們將不再填充 nav-container 內容盒的高度。默認情況下這些鏈接元素是頂部對齊的，下方會空出一些區(qū)域。將 nav-container 的彈性子元素設為底部對齊（即 align-items: end）就可以解決這個問題。
由于導航元素的字號已經改變，其內邊距（之前以相對單位 em 來設置大小）也會隨之改變。為此，這里將尺寸單位改為 rem。當然也可以通過計算得出新的以 em 為單位的相對尺寸，但這樣做并不值得。
text-transform 屬性可能較為陌生。它可以把所有字母改為大寫，無論在 HTML 中是如何書寫的。這里強烈推薦這種方式，而不是到 HTML 里手動將文字改為大寫。這樣依賴，如果將來設計稿修改了，就可以只改一行 CSS，而不必在所有 HTML 頁面的多個位置進行修改。只有當需要遵循某種語法規(guī)則的大寫（例如首字母縮略詞）時，才應該在 HTML 中大寫。而像本例這樣只是單純出于設計上的考慮而渲染的大寫形式，僅通過 CSS 就能實現。
text-transform 屬性的另一個合法值為 lowercase，用于將所有字母轉為小寫。此外還可以設為 capitalize，用于將每個單詞的首字母轉為大寫形式、其余字母保持 HTML 中的原始寫法。
12.7 本章小結 Summary
- 文本的行高會影響元素所在的內容盒尺寸。在對頁面間距進行微調時需要將這個高度納入考慮范圍。
- 利用谷歌字體這樣的字體托管服務，Web 字體可以輕松集成到頁面中。
- 利用
@font-face規(guī)則可以輕松托管自己的 Web 字體。該規(guī)則可以定義字體名稱、限定字體粗細及各種字體樣式。 - Web 字體會占用大量的頁面空間；為此需要限制 Web 字體的數量，并盡可能選用可變字體，讓頁面進一步輕量化。
font-display屬性用于控制頁面在 Web 字體加載時的初始渲染方式。- 文字間距的調節(jié)可通過
line-height和letter-spacing屬性實現。正文內容的行高通常在接近1.5時效果最佳；而對于大標題，保持較小的間距往往效果更好。
關于《CSS in Depth》（中譯本書名《深入解析 CSS》）
| 第 1 版 | 第 2 版 | |
|---|---|---|
| 讀者評分 | 原版：4.7（亞馬遜）；中文版：9.3（豆瓣） | 原版：5.0（亞馬遜）；中文版：暫無，待出版 |
| 出版時間 | 原版：2018 年 3 月；中文版：2020 年 4 月 | 原版：2024 年 7 月；中文版：暫無，待出版 |
| 原價 | 原版：$44.99；中文版：￥139.00 | 原版：$59.99；中文版：暫無，待出版 |
| 現價 | 原版：$36.49；中文版：￥52.54 起步 | 原版：$52.09；中文版：暫無，待出版 |
| 原版國內預訂 | 起步價 ￥461.00 | 起步價 ￥750.00 |
本專欄為該書第 2 版高分譯文專欄，全網首發(fā)，精譯精校，持續(xù)更新，計劃今年內完成全書翻譯，敬請期待！！！
目前已完結的章節(jié)（可進入本專欄查看詳情，連載期間完全免費）：
- 第一章 層疊、優(yōu)先級與繼承（已完結）
- 1.1 層疊
- 1.2 繼承
- 1.3 特殊值
- 1.4 簡寫屬性
- 1.5 CSS 漸進式增強技術
- 1.6 本章小結
- 第二章 相對單位（已完結）
- 2.1 相對單位的威力
- 2.2 em 與 rem
- 2.3 告別像素思維
- 2.4 視口的相對單位
- 2.5 無單位的數值與行高
- 2.6 自定義屬性
- 2.7 本章小結
- 第三章 文檔流與盒模型（已完結）
- 3.1 常規(guī)文檔流
- 3.2 盒模型
- 3.3 元素的高度
- 3.4 負的外邊距
- 3.5 外邊距折疊
- 3.6 容器內的元素間距問題
- 3.7 本章小結
- 第四章 Flexbox 布局（已完結）
- 4.1 Flexbox 布局原理
- 4.2 彈性子元素的大小
- 4.3 彈性布局的方向
- 4.4 對齊、間距等細節(jié)處
- 4.5 本章小結
- 第五章 網格布局（已完結）
- 5.1 構建基礎網格
- 5.2 網格結構剖析 （上）
- 5.2.1 網格線的編號（下）
- 5.2.2 網格與 Flexbox 配合（下）
- 5.3 兩種替代語法
- 5.3.1 命名網格線
- 5.3.2 命名網格區(qū)域
- 5.4 顯式網格與隱式網格（上）
- 5.4.1 添加變化 （中）
- 5.4.2 讓網格元素填滿網格軌道（下）
- 5.5 子網格（全新增補內容）
- 5.6 對齊相關的屬性
- 5.7 本章小結
- 第六章 定位與堆疊上下文（已完結）
- 6.1 固定定位
- 6.1.1 創(chuàng)建一個固定定位的模態(tài)對話框
- 6.1.2 在模態(tài)對話框打開時防止屏幕滾動
- 6.1.3 控制定位元素的大小
- 6.2 絕對定位
- 6.2.1 關閉按鈕的絕對定位
- 6.2.2 偽元素的定位問題
- 6.3 相對定位
- 6.3.1 創(chuàng)建下拉菜單（上）
- 6.3.2 創(chuàng)建 CSS 三角形（下）
- 6.4 堆疊上下文與 z-index
- 6.4.1 理解渲染過程與堆疊順序（上）
- 6.4.2 用 z-index 控制堆疊順序（上）
- 6.4.3 深入理解堆疊上下文（下）
- 6.5 粘性定位
- 6.6 本章小結
- 第七章 響應式設計（已完結）
- 7.1 移動端優(yōu)先設計原則（上篇）
- 7.1.1 創(chuàng)建移動端菜單（下篇）
- 7.1.2 給視口添加 meta 標簽（下篇）
- 7.2 媒體查詢（上篇）
- 7.2.1 深入理解媒體查詢的類型（上篇）
- 7.2.2 頁面斷點的添加（中篇）
- 7.2.3 響應式列的添加（下篇）
- 7.3 流式布局
- 7.4 響應式圖片
- 7.5 本章小結
- 第八章 層疊圖層及其嵌套
- 8.1 用 layer 圖層來操控層疊規(guī)則（上篇）
- 8.1.1 圖層的定義（上篇）
- 8.1.2 圖層的順序與優(yōu)先級（下篇）
- 8.1.3 revert-layer 關鍵字（下篇）
- 8.2 層疊圖層的推薦組織方案
- 8.3 偽類 :is() 和 :where() 的用法
- 8.4 CSS 嵌套的使用
- 8.4.1 嵌套選擇器的使用
- 8.4.2 深入理解嵌套選擇器
- 8.4.3 媒體查詢及其他 @規(guī)則 的嵌套
- 8.5 本章小結
- 第九章 CSS 的模塊化與作用域
- 9.1 模塊的定義
- 9.1.1 模塊和全局樣式
- 9.1.2 一個簡單的 CSS 模塊
- 9.1.3 模塊的變體
- 9.1.4 多元素模塊
- 9.2 將模塊組合為更大的結構
- 9.2.1 模塊中多個職責的拆分
- 9.2.2 模塊的命名
- 9.3 CSS 的作用域
- 9.3.1 CSS 作用域的就近原則
- 9.3.2 劃定作用域的邊界
- 9.3.3 CSS 中的隱式作用域
- 9.3.4 關于 CSS 作用域與層疊圖層
- 9.4 CSS 模式庫
- 9.5 本章小結
- 第十章 CSS 容器查詢
- 10.1 容器查詢的一個簡單示例
- 10.1.1 容器尺寸查詢的用法
- 10.2 深入理解容器
- 10.2.1 容器的類型
- 10.2.2 容器的名稱
- 10.2.3 容器與模塊化 CSS
- 10.3 與容器相關的單位
- 10.4 容器樣式查詢的用法
- 10.4.1 將模塊與所在容器解耦
- 10.4.2 減少重復代碼
- 10.5 本章小結
- 第 11 章 顏色與對比
- 11.1 通過對比進行交流
- 11.1.1 模式的建立
- 11.1.2 還原設計稿
- 11.2 顏色的定義
- 11.2.1 色域與色彩空間
- 11.2.2 CSS 顏色表示法（RGB、Hex、HSL、HWB、LAB/OKLAB、LCH/OKLCH）
- 11.3 利用 OKLCH 處理顏色（上篇）
- 11.3.4 從頁面其他顏色衍生出新顏色（下篇）
- 11.4 思考字體顏色的對比效果
- 11.5 本章小結
- 附錄
- 附錄A：CSS 選擇器參考
- 附錄B：CSS 預處理器簡介