整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
開始動手制作網頁之前，首先要了解網頁設計的標準與規范，這樣才能保證設計圖符合網頁設計的要求。
網頁設計規范是適用于Web端的人機交互界面的標準，是每個網頁設計師從業時必須要遵守的行為準
則。網頁設計規范的首要目的是優化Web產品、提升用戶體驗。同時，統一的網頁設計規范可以讓設計師重復利用相同模塊，有助于提高設計師的工作效率。此外，遵守設計規范也有利于前端工程師、交互設計師等其他崗位之間快速有效地傳遞信息。上崗前熟讀設計規范并牢記要點可以幫助新人快速適應工作崗位，減少出錯的可能性。
對于大多數中國人來說，見過最多的字體應該就是黑體和宋體了，這兩種字體是設計的基礎字體，應用在生活的各個場景中。
? 宋體：源于書法體，主要特點是橫細豎粗，筆畫末端帶有三角狀裝飾，字形端莊有力，常運用在文章正文當中。
? 黑體：字的主要特點是橫豎均勻，筆畫相對宋體較為粗壯，常用作文章標題，突出而醒目。
宋體、黑體字形對比
早在2006年Windows發布Vista系統時，微軟雅黑體就已代替宋體，成為了新的系統默認字體。
那么當時為何要選擇微軟雅黑體來代替宋體呢？
原因是宋體是一款襯線字體，受到Windows平臺字體渲染技術的限制，在小字號字體渲染方面表現略差，部分字號在顯示時會產生鋸齒、模糊等效果。
而微軟雅黑這款非襯線字體，筆畫豐滿、簡潔，常用字號的顯示效果相比宋體更為優秀，同時識別度更高。因此，從Vista時代起，微軟雅黑體就作為Windows的系統默認字體沿用至今。
常規、加粗、傾斜字形對比
在網頁設計中，為了保證有較好的顯示效果，主要標題的字體建議使用微軟雅黑體，次要標題可選用宋體。
微軟雅黑體網頁顯示效果
文章的正文可選用宋體，也可使用微軟雅黑體。
宋體和微軟雅黑體網頁顯示效果對比
此外，如果網頁設計中遇到需要展示英文字符的情況，建議選擇Arial、Verdana和Tahoma這幾種系統默認字體。
3種系統默認英文字體
在網頁設計中，一般選擇使用雙數字號，字號的大小并沒有明確規定，但為了確保正常的閱讀效果，可以參考以下參數：
? 在網頁設計中最小的字號一般為12像素；
? 正文常見字號有12像素、14像素和16像素；
? 標題常見字號有18像素、20像素、26像素和30像素。
這里需要注意的是，由于顯示器分辨率的不斷提高，12像素的字號在大分辨率顯示器中會顯得較小，對用戶閱讀造成一定的困難。因此，在目前的網頁設計中很少使用12像素的字號，網站常規正文字號普遍使用的是14像素或16像素。
各個字號下的宋體、微軟雅黑體顯示效果如圖所示。
不同字號下的字形展示
宋體和微軟雅黑字體均可以作為網頁設計的常用字體。但在目前的網頁設計中我們會發現，網頁中基本都以微軟雅黑字體為主，而宋體已不多見。具體來說，微軟雅黑體相比宋體而言，少了一些裝飾性，同樣字號，微軟雅黑體在視覺上更顯粗壯有力，且辨識度更高，尤其是小字號的顯示效果，微軟雅黑體的視覺感會更為清晰與明朗。
網頁標題如何設計看起來會比較舒服？
答案是字體清晰疏闊，字號醒目易讀即可。
? 例如，網易新聞的標題樣式一般設置為微軟雅黑體字體，36像素的字號。
微軟雅黑字體，字號36px
? 騰訊新聞的標題樣式一般設置為微軟雅黑體字體，26像素的字號。
微軟雅黑字體，字號26px
閱讀是用戶在網站上獲取信息的重要方式，閱讀體驗的好壞直接關系到用戶對產品的印象，作為信息展示的主體，漂亮的文字排版和巧妙的留白都能為整個網頁增色不少。在網頁設計中，文字排版的要點分為兩個方面，即段落和行間距。
? 段落中“行長”與“對齊方式”的設置
行長：主要指段落文字的寬度。
行長
通常情況下，行越長，行間距越大，否則用戶在閱讀時很容易串行。在網頁正文中，漢字一般以每行顯示30~40個字為宜，英文一般以每行顯示40~70個字母為宜。
段落：對齊方式主要有4種，包括左對齊、右對齊、居中對齊和兩端對齊。
段落對齊方式
在國內，大段文字的設計，多數設計師會根據中國用戶的閱讀習慣，將對齊方式設置為左對齊。
? 段落中“行間距”的設置
行間距：指段落中行與行之間的距離。
行間距作為段落中的留白，讓字與字之間有了可呼吸的空間。過小的行間距會使頁面變得擁擠不堪，增加用戶錯讀的可能性。而過大的行間距則會占用大量的頁面空間，缺乏美感。選擇適當的行間距不僅可以提升文字的易讀性，也可以最大限度地利用好頁面空間。
行間距的設置
傳統中文文檔默認行間距一般為1.5倍，在現階段的網頁設計中，漢字一般使用1.8~2倍的行間距。
不同數值的中文行間距
英文段落一般選擇1.5倍行間距。
不同數值的英文行間距
在設計的日常工作中，設計師與前端開發人員的對接關系往往非常緊密，而設計圖的標準化標注可以提高前端開發人員的工作效率。
效果圖的標注一般包括以下3個部分：
☉ 頁面中控件的顏色、尺寸、交互效果（如按鈕、表單等）。
☉ 字體顏色、字號。
☉ 頁面中各個模塊的尺寸和間距。
在效果圖標注中，應特別注意以下4個問題：
☉ 保證標注的文字清晰易讀。
☉ 標注所使用的顏色應與背景色區分。
☉ 標注應盡量在空白區域，不要對原圖造成視覺干擾。
☉ 標注信息應條理清楚，同一模塊的標注應擺放在同一位置，適當留有間隙，方便開發人員閱讀。
下面，我們來看一張視覺設計稿的標注效果圖。
視覺效果圖標注
標注工具有很多種，這里推薦使用arkMan（馬克鰻），MarkMan支持Windows和Mac雙系統操作，界面簡潔，使用簡單易操作，非常適合設計初學者使用。
MarkMan啟動界面
MarkMan操作界面
在進行網頁設計時，網頁設計師必須熟讀網頁設計的原則和規范，且一切設計必須依照規范來進行。目前遵循的網頁設計規范都是經過科學論證和用戶調研得出的。隨著科學技術的不斷發展，這些規范可能需要與時俱進，但是對于現階段的網頁設計而言，這些符合當下用戶體驗的規范經驗值得設計師學習和借鑒。
網頁設計師在入門前，首先要做到對“美”有正確的認知，能夠準確判斷什么是美、什么是丑，只有這樣才能做好設計。作為新人，需要不斷學習，多看多練是提高設計水平的王牌法則。國內近些年也有許多作品十分突出的網頁設計師，他們的作品常常被發表在各大設計網站，讀者在工作之余一定要多瀏覽設計網站，通過多看優秀作品來提升眼界，在觀賞的同時汲取優秀設計案例的經驗，取長補短，將別人的優點融入自己的作品中，在學習中不斷進步。
? 站酷（Zcool）
站酷網是一個人氣設計師互動平臺，聚集中國大量的專業設計師，包括平面設計師、網頁設計師以及插畫設計師等，涉及藝術創作、交互設計、影視動漫、時尚文化和廣告創意等領域。
站酷網
? 花瓣
花瓣網是一個類似Pinterest的網站，基于興趣分享，為用戶提供簡單的素材采集服務，幫助用戶將自己喜歡的圖片重新組織和收藏，設計師可以從中尋找設計靈感和設計素材。
花瓣網
? UI中國
UI中國的前身為 Iconfans，是一個專業的界面交互設計平臺，主要為設計師們提供交流學習和作品展示服務，會員均為職業UI設計師，專業性較強，因此也是UI設計師人才流動的集散地。
UI中國
? Uehtml
Uehtml是優藝客（原韓雪冬網頁設計工作室）旗下的設計師交流平臺，專為網頁設計和界面設計而生，擁有較多創意精美的網頁設計作品。
UeHtml
? 優設
是國內比較專業的網頁設計師交流學習平臺，有許多關于設計師的職業理念和從業經驗的收集與分享，另有好用的設計小插件可供下載。
優設網
? Dribbble
Dribbble是一個面向創作家、藝術工作者、設計師等創意類作品分享的平臺，提供作品在線服務，供網友在線查看已經完成的作品或者正在創作的作品的交流網站。
Dribbble
? Behance
Behance 是一個設計社區，在這里創意設計人士可以展示自己的作品，欣賞別人分享的創意作品，還可以通過評論、關注、站內短信等方式與這些設計師進行互動。
Behance
? Freebiesbug
Freebiesbug一個免費PSD資源下載平臺，包括APP設計、icon設計、Web展示模板、前端代碼以及字體等素材資源。
Freebiesbug
? PSD REPO
PSD REPO一個大量精品PSD源文件下載平臺，涵蓋目前設計主流方向如icon、移動端設計、按鈕設計等，且均可免費下載。
PSD REPO
? 365PSD
365PSD有付費和免費兩大類資源可供下載，種類繁多，方向劃分較為詳細，包括建筑、廣告、Logo、
動物等。
365PSD
? MaterialUp
MaterialUp包含iOS、Android、Web等平臺的相關設計資源，各類素材與當下潮流趨勢緊密貼合。
MaterialUP
文是站在一個網頁設計師的角度，所寫的關于最佳字體排版實踐的手冊，包括字體排版設計、Web 字體、Web 樣式指導等四個方面，而且每一章后都有擴展閱讀幫你深入了解細節，全程高能干貨，建議閱讀。
目錄
簡介
字體排版絕不僅僅是使用字體那么簡單，它包括了關于文字”看上去會是怎么樣？”的所有事情——例如文字的大小，行高，顏色甚至文字間留白這樣的細枝末節的小事。一個好的文字排版會為你所寫的內容定下情感基調，并且可以幫助讀者更好的理解其內容和語境。
為了讓你使用起來更像是在看一本參考書而不是說明書，本文將會非常精簡清晰，如果你想進一步的了解更多細節，可以點擊查看在每一章中的”擴展閱讀”去深入了解。
這本手冊將會在GitHub上開源，并且會持續更新一些最佳實踐的范例，希望你們喜歡！
字體排版設計
視覺層次
視覺層次是一種理念，它意在傳達頁面中的元素應該依照其重要性進行組織排版，以便讀者可以很容易的通覽整個頁面，找到相關的內容。一個好的視覺層次可以引導讀者在閱讀時候的視覺流向。視覺層次被廣泛運用于文字排版中，它構成了文字排版設計的理論基石。
請看下圖的”愛麗絲夢游仙境”的字體排版設計，它展現了一個清晰的視覺層次：
點擊這里 查看網頁上的實際效果
視覺層次可以被分成以下4個部分：
擴展閱讀：
字體排版中的格式塔原則
格式塔原則， 或格式塔法則， 是一種構建感性認知的規律。當我們觀察這個世界的時候，我們通常會意識到，一個復雜的場景是由多個在某些背景之上的物體構成的，而這些物體則是由更小的一些物體構成的，依此循環下去。
在字體排版中我們需要理解的兩個很重要的格式塔原則就是”距離原則”和”相似原則”。.
距離原則
為了更好地掌握元素定位的方法，了解距離原則是很重要的。距離原則表明，人們會將靠得近的物體視為有關聯的物體，反之，隔得比較遠的物體將會被看成屬于不同類別。
點擊此處查看原圖
在字體排版設計中，”距離”指的是通過設置行高、內間距和外間距所制造出來的留白空間。在兩段不同的段落之間應該留有明顯的并且易于區分的留白間隔，請看下面的例子：
注意啦，你覺得應該把內容相關的部分都擠到一個很小的空間中去嗎？當然不是這樣，自由隨意的留白也是很重要的。距離原則告訴我們，只需要為那些沒有關系的段落之間額外的加上一些易于區分的留白就可以了
相似原則
格式塔的相似原則告訴大家，看起來很像的東西會被認為是一類的東西。舉個例子，如果所有可點擊的文字被設置為天藍色，那么讀者就會認為文章中所有天藍色的文字內容都是可以點擊的。
在字體排版中，相似原則就意味著，擁有同樣功能的元素應該在樣式上保持一致。如果兩組元素的功能相似的話，那么它們也應該看起來很像才對。例如，兩篇同為博客帖子的文章應該看起來很像。而相反的，兩個功能不相同的元素也應該看起來不像。
擴展閱讀：
字體
選擇字體
選擇字體是一個具有創造性和情感的過程。不同的字體可以傳達不同的情感，你可以盡情挑選一個合適的字體讓你的文字感情變得豐沛起來。
擴展閱讀：
使用web字體
我們使用以下的格式來聲明引入的web字體文件：
@font-face {
font-family： 'Helvetica Neue';
src： url('/assets/fonts/HelveticaNeue-Light.eot');
src： url('/assets/fonts/HelveticaNeue-Light.eot?#iefix') format('embedded-opentype')，
url('/assets/fonts/HelveticaNeue-Light.woff2') format('woff2')，
url('/assets/fonts/HelveticaNeue-Light.woff') format('woff')，
url('/assets/fonts/HelveticaNeue-Light.ttf') format('truetype');
font-weight： 300;
font-style： normal;
}
@font-face {
font-family： 'Helvetica Neue';
src： url('/assets/fonts/HelveticaNeue-Bold.eot');
src： url('/assets/fonts/HelveticaNeue-Bold.eot?#iefix') format('embedded-opentype')，
url('/assets/fonts/HelveticaNeue-Bold.woff2') format('woff2')，
url('/assets/fonts/HelveticaNeue-Bold.woff') format('woff')，
url('/assets/fonts/HelveticaNeue-Bold.ttf') format('truetype');
font-weight： bold;
font-style： normal;
}
@font-face {
font-family： 'Helvetica Neue';
src： url('/assets/fonts/HelveticaNeue.eot');
src： url('/assets/fonts/HelveticaNeue.eot?#iefix') format('embedded-opentype')，
url('/assets/fonts/HelveticaNeue.woff2') format('woff2')，
url('/assets/fonts/HelveticaNeue.woff') format('woff')，
url('/assets/fonts/HelveticaNeue.ttf') format('truetype');
font-weight： normal;
font-style： normal;
}
為了達到最大程度上的兼容，我們建議使用上面列出的格式。或者，只使用 woff2 和 woff也會支持大部分的現代瀏覽器。
你需要為每個列出來的格式提供一個相應的字體文件。推薦使用 Transfonter 或者FontSquirrel’s Web Font Generator，這樣你就可以在只有一個字體文件的情況下，將其轉換成不同的文件格式。
盡可能的壓縮你的字體文件。 點擊這里 查看更多信息。
將多個同源字體文件（細體、常規、半粗體、粗體等等）合并成一個font-family， 盡量不要為每個字體都起一個新的font-family的名字。
或者，你也可以通過線上字體資源服務，如Google Fonts 或者 Typekit引入你想要的字體。
擴展閱讀：
加載字體
在你引入的字體被渲染出來之前，他們需要先進行加載。下面是三種在加載的時候可能會發生的事情：
場景1只發生在你嘗試使用一個不存在的字體，或者聲明時候的src指向了一個壞鏈， 這種情況可以并且應該徹底避免。接著我們跳到場景3，這種情況通常在字體被正確的緩存的時候發生，也是我們喜聞樂見的。場景2中包含著字體加載的過程，字體加載通常是難以避免的（至少是在第一次請求的時候），下面是幾種處理方式：
1. 文檔樣式閃爍方案 （FOUT）
FOUT是指網頁會在切換到合適的網頁字體之前，使用默認或者備選字體顯示文字。這種情況的出現是因為只有當HTML和CSS都被下載完成之后，字體請求才會發出。這就意味著，在HTML被顯示出來而字體文件沒有被完全下載下來中間存在著一段”空檔”時間。 FOUT 算是對大部分的網頁而言的最佳選擇，主要是其他的選擇也許更糟。如果使用得到的話，FOUT 很難被用戶察覺出來。
2. 不可見文本閃爍方案（FOIT）
很多年前，一些現代瀏覽器開始使用一種新的技術來處理字體加載的問題 — FOIT. FOIT是指當瀏覽器檢測到字體正在加載的時候，隱藏應用這段字體的文字，直到字體完全下載完才將其顯示出來。 然而我們應該避免這種做法雖然這樣做從理論上看起來還不錯，但是這會帶給那些網絡速度比較差的用戶十分糟糕的體驗。有可能會在最初的FOIT后出現FOUT， 最壞的情況可能會是這段文字將永遠看不到了。
3. 白屏方案
即在字體加載完成之前，整個網頁都處于不可見的狀態，或者也可以采用顯示一個進度條.我們只推薦當FOUT 嚴重影響用戶體驗的時候使用這種方法。 我們通常在一個網頁需要大面積顯示一個特定的字體的時候使用該方法，否則，FOUT 總會我們的第一選擇，因為”內容至上”。白屏方案與 FOIT很相似， 但對于你來說，你擁有控制在什么時候給用戶展示你的內容的自由，這種感覺會似乎更棒一些，不是嗎？而且在FOIT方案中， 不可見的文本有時候會給讀者帶來困惑，而徹底的白屏（或者一個進度條）會讓人很自然的覺得是一個正在加載的信號。
不管你是打算使用 FOUT 方案或者白屏方案， 我們都推薦您使用Web Font Loader這個JavaScript庫. Web Font Loader 可以讓你對 @font-face加以控制， 而且你也為字體加載的體驗添加控制事件。
注意： 有一個W3C 字體加載 API也會實現同樣的功能，但是它現在的 支持不是很好_
FOUT 方案
下面是一個使用 Web Font Loader 實現了 FOUT的例子：
<script type="text/javascript"> WebFontConfig = {
google： { families： [ 'Lora：400，700，400italic，700italic：latin' ] }
};
(function() {
var wf = document.createElement('script');
wf.src = ('https：' == document.location.protocol ? 'https' ： 'http') +
'：//ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf， s);
})(); </script>
<noscript>
<link rel='stylesheet' type='text/css'>
</noscript>
<style> p {
/* use fallback fonts */
}
.wf-active p {
/* styles for custom fonts */
} </style>
異步地使用 Web Font Loader 很重要，只有這樣做才不會延誤頁面其他部位的渲染。
寫樣式的時候，讓你的備用字體盡可能近的靠近你的實際字體，這樣才能最大程度的減少 FOUT造成的影響.點擊 這里你將會看到一系列的備選字體. 使用 這個工具你將很容易的看到備選字體和你引入的字體的對比效果.
白屏方案
下面是一個使用 Web Font Loader 實現了白屏方案的例子：
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.16/webfont.js"></script>
<script> WebFont.load({
google： {
families： ['Raleway'， 'Oswald']
}
}); </script>
<noscript>
<link rel='stylesheet' type='text/css'>
</noscript>
<style></style>
在這個例子里面，備選字體不需要和你引入的字體看起來很像，因為我們不會用到 FOUT. 依照你自己的喜好去選擇備選字體吧。
如果你想要用一個進度條取代白屏，你可以使用Pace。這種方法在用戶體驗上效果會更好一些，特別是當字體文件很大的時候。
擴展閱讀：
OpenType 的特性
OpenType 的特性可以被視為文字進行字體排版時的可選項，它們被用來加強文字的表現和易讀性。
p {
font-kerning： normal;
font-variant-ligatures： common-ligatures contextual;
-moz-font-feature-settings： "kern"， "liga"， "clig"， "calt";
-ms-font-feature-settings： "kern"， "liga"， "clig"， "alt";
-webkit-font-feature-settings： "kern"， "liga"， "clig"， "calt";
font-feature-settings： "kern"， "liga"， "clig"， "calt";
}
OpenType 特性被放置于字體之中，這就意味著對于不同的字體，會有不同的特性，在使用這些特性之前，我們需要看一看我們的字體是否支持這些特性。
使用 font-feature-settings來激活 OpenType 特性. 由于目前對于這個屬性的支持不好，我們需要在屬性之前加上前綴。
Kerning kern， ligatures liga， contextual ligatures clig， 和 contextual alternatives calt這四種適用于所有字體中 ######( 譯者注：font-feature-settings這種屬性僅支持拉丁文語系的字體使用，并不支持中文哦！ )
擴展閱讀：
Web Style Guide
相對大小
盡可能的使用相對大小。
html { font-size： 100% }
p { font-size： 1em }
@media (min-width： 64em) {
html {
font-size： 112.5%;
}
}
擴展閱讀：
容器
容器，或者稱為包裝，指的是用來包裹一個或者多個元素的HTML元素。它將元素分組，從而更好進行語義化、修飾以及布局。
html {
box-sizing： border-box;
}
*，
*：before，
*：after {
box-sizing： inherit;
}
.container {
max-width： 67rem;
padding-left： 1.5rem;
padding-right： 1.5rem;
}
擴展閱讀：
字體大小
使用 縮放模塊 可以幫助你決定在你的元素上面應用怎樣的font-size .縮放模塊指的是依照其內容安排的一系列比較合適的字體大小的數值。
縮放模塊的說明. 點擊此處
響應式的縮放模塊
只使用單獨的一個縮放模塊方案并不一定適合所有分辨率的設備，為了解決這個問題，你可以依據用戶的設備的分辨率的不同提供不同的縮放方案
//Sass responsive modular scale
/*
* Modular scale
* http://www.modularscale.com/?1.25&em&1.33&web&text
*/
$type-scale-large： (
h1： 3.911rem，
h2： 2.941rem，
h3： 2.211rem，
h4： 1.663rem，
p： 1.25rem
);
/*
* Modular scale
* http://www.modularscale.com/?1.25&em&1.25&web&text
*/
$type-scale-medium： (
h1： 3.052rem，
h2： 2.441rem，
h3： 1.953em，
h4： 1.563rem，
p： 1.25rem，
);
/*
* Modular scale
* http://www.modularscale.com/?1.1&em&1.25&web&text
*/
$type-scale-small： (
h1： 2.686rem，
h2： 2.148rem，
h3： 1.719rem，
h4： 1.375rem，
p： 1.1rem
);
$breakpoint-medium： 75em;
$breakpoint-small： 45em;
@mixin size($level) {
font-size： map-get($type-scale-large， $level);
@media (max-width： $breakpoint-medium) {
font-size： map-get($type-scale-medium， $level);
}
@media (max-width： $breakpoint-small) {
font-size： map-get($type-scale-small， $level);
}
}
// Example
.title {
@include size(h1);
}
擴展閱讀：
垂直距離
文字間的垂直距離是由 line-height， margin， 和padding構建出來的.
垂直節律
垂直節律是指元素之間的垂直間隔要保持一致性。這一點十分重要，它可以帶給讀者視覺上放松的享受，給他們一種親近的感覺。
Image source建立垂直節律很簡單。首先，確定你使用的基礎垂直內間距和基礎垂直外間距的數值。然后，為你的容器，文字性元素或者其他相關元素的單方向的外邊距（或者內邊距）應用這個數值。如果你需要制制造更大的間隔的話，應用這個數值的倍數就好啦!
將基礎間距的數值設置成與行高相同的數值，這樣你的文字就像寫在一個條格紙上那樣整齊，就像我們傳統的印刷字體設計的那樣。然而，想要文字擁有垂直節律不一定需要按照上面的方法來做，只要你設置了一個基礎間距，并且使得其他間距都是由這個間距成倍的得來的，那樣就可以了。
body {
line-height： 1.4; // Base line height
}
p {
font-size： 1.25em; // Base font size
margin-bottom： 1.75rem; // Base vertical spacing： (1.4 * 1.25) = 1.75
}
h1 {
font-size： 3em;
margin-bottom： 3.5rem; // Double the base value for a larger gap (1.75 * 2) = 3.5
}
h2 {
font-size： 2em;
margin-bottom： 1.75rem;
}
h3 {
font-size： 1.5em;
margin-bottom： 1.75rem;
}
.page-container {
padding： 3.5rem 2rem; // 3.5 is double the base value
}
/* Simple Sass Implementation */
$base-line-height： 1.4;
$base-font-size： 1.25rem;
$vertical-rhythm： $base-line-height * $base-font-size;
body {
line-height： $base-line-height;
}
p {
font-size： $base-font-size;
margin-bottom： $vertical-rhythm;
}
h1 {
font-size： 3em;
margin-bottom： $vertical-rhythm * 2;
}
h2 {
font-size： 2em;
margin-bottom： $vertical-rhythm;
}
h3 {
font-size： 1.5em;
margin-bottom： $vertical-rhythm;
}
.page-container {
padding： ($vertical-rhythm * 2) 2rem;
}
文字底部對齊基線網格
文字底部對齊基線是垂直節律的一個更為嚴格的實現。在網頁中，文字通常在line-height間居中對齊.但對于較大的文字來說會比較討厭，因為這樣做會導致在頂部和底部留有太多的空間。在傳統印刷的時候，這個問題一般會通過讓文字對齊基線網格的底部得以解決。
我們也可以通過為較大的文字添加一個負的margin-top和一個較小的margin-bottom，不需要使用基線網格而解決這個問題。
圖片資源為不同的字體樣式、字體大小和分辨率添加一個底部對齊的基線網格并不是一個很容易的方式，所以強烈建議你使用一個字體排版基線庫例如 Sassline 或者 MegaType.
注意，垂直節律只是一個建議，而且基線網格也只是想象出來的。所以我們不需要在每個使用場合都遵循這個規律，也不用在每個元素中都去追求像素級別的完美。
擴展閱讀：
顏色
顏色可以很大程度上的增加視覺辨識度，是字體排版中一個重要的組成部分。
####擴展閱讀：
下劃線
在印刷品里，永遠都不要使用到下劃線，因為這樣做會影響文字的閱讀，重點是，它很丑！Practical Typography
一般的來說，在網頁中下劃線也會看起來并不美好！幸運的是， background-image 就包含一個方法，它可以使得下劃線變得好看一點。 下面是Adam Schwartz使用Sass實現的下劃線的例子 ：
@mixin text-underline-crop($background) {
text-shadow： .03em 0 $background，
-.03em 0 $background，
0 .03em $background，
0 -.03em $background，
.06em 0 $background，
-.06em 0 $background，
.09em 0 $background，
-.09em 0 $background，
.12em 0 $background，
-.12em 0 $background，
.15em 0 $background，
-.15em 0 $background;
}
@mixin text-background($color-bg， $color-text) {
background-image： linear-gradient($color-text， $color-text);
background-size： 1px 1px;
background-repeat： repeat-x;
background-position： 0% 95%;
}
@mixin text-selection($selection) {
&：：selection {
@include text-underline-crop($selection);
background： $selection;
}
&：：-moz-selection {
@include text-underline-crop($selection);
background： $selection;
}
}
@mixin link-underline($background， $text， $selection){
@include text-underline-crop($background);
@include text-background($background， $text);
@include text-selection($selection);
color： $text;
text-decoration： none;
*，
*：after，
&：after，
*：before，
&：before {
text-shadow： none;
}
&：visited {
color： $text;
}
}
/* Example usage */
a {
@include link-underline(#fff， #333， #0CBF);
}
SmartUnderline 是一個簡化這個工作的庫。建議你只在有鏈接的地方使用下劃線，這是大多是網站都遵循的規律，如果不這么做的話，可能會引起誤解。
擴展閱讀：
總結
恭喜你，你已經快讀完這篇手冊了。在web，這種用戶可以在任何分辨率的設備上使用的媒介上進行字體排版是及其困難的。在很多年前，當我第一次開始設計網頁的時候，我發現幾乎找不到最新的關于最佳WEB字體排版實踐的信息。很多專家發表的博客文章內容相互矛盾，而且很多市面上的web字體排版的書籍也很少談及具體技術應用的細節。字體排版手冊希望可以解決這個問題，并且為菜鳥們提供應該了解的關于如何創建符合字體排版工業標準的全部知識。我希望這個成果可以令你滿意。
請私信我回復“666”，為嚴哥打Call~，還有更多驚喜哦~
.............................................................
UI嚴選—越努力，越幸運
于漢字的特殊性，在CSS網頁布局中，中文排版有別于英文排版。排版是一個麻煩的問題，作為一個優秀的網頁設計師和網頁制作人員，掌握一些簡單的中文排版技巧是不可或缺的。所以今天小編特意整理了一些簡單實用的技巧，希望對大家有所幫助。
字體
我們可以使用css樣式為網頁中的文字設置字體、字號、顏色等樣式屬性。
body{font-family:"宋體";}
這里注意不要設置不常用的字體，因為如果用戶本地電腦上如果沒有安裝你設置的字體，就會顯示瀏覽器默認的字體。（因為用戶是否可以看到你設置的字體樣式取決于用戶本地電腦上是否安裝你設置的字體。）
現在一般網頁喜歡設置“微軟雅黑”，如下代碼：
body{font-family:"Microsoft Yahei";}
或
body{font-family:"微軟雅黑";}
字號、顏色
可以使用下面代碼設置網頁中文字的字號為12像素，并把字體顏色設置為#666(灰色)：
body{font-size:12px;color:#666}
粗體
可以使用下面代碼實現設置文字以粗體樣式顯示出來。
p span{font-weight:bold;}
斜體
以下代碼可以實現文字以斜體樣式在瀏覽器中顯示：
p a{font-style:italic;}
<p>三年級時，我還是一個<a>膽小如鼠</a>的小女孩。</p>
下劃線
有些情況下想為文字設置為下劃線樣式，這樣可以在視覺上強調文字，可以使用下面代碼來實現：
p a{text-decoration:underline;}
<p>三年級時，我還是一個<a>膽小如鼠</a>的小女孩。</p>
刪除線
如果想在網頁上設置刪除線怎么辦，這個樣式在電商網站上常會見到：
上圖中的原價上的刪除線使用下面代碼就可以實現：
.oldPrice{text-decoration:line-through;}
縮進
中文文字中的段前習慣空兩個文字的空白，這個特殊的樣式可以用下面代碼來實現：
p{text-indent:2em;}
注意：2em的意思就是文字的2倍大小
行間距（行高）
這一小節我們來學習一下另一個在段落排版中起重要作用的行間距（行高）屬性（line-height），如下代碼實現設置段落行間距為1.5倍。
p{line-height:1.5em;}
中文字間距、字母間距
如果想在網頁排版中設置文字間隔或者字母間隔就可以使用 letter-spacing 來實現，如下面代碼：
h1{
letter-spacing:50px;
}
注意：這個樣式使用在英文單詞時，是設置字母與字母之間的間距。
如果我想設置英文單詞之間的間距呢？可以使用 word-spacing 來實現。如下代碼：
h1{
word-spacing:50px;
}
...
<h1>welcome to imooc!</h1>
對齊
想為塊狀元素中的文本、圖片設置居中樣式嗎？可以使用text-align樣式代碼，如下代碼可實現文本居中顯示。
h1{
text-align:center;
}
<h1>了不起的蓋茨比</h1>
同樣可以設置居左：
h1{
text-align:left;
}
<h1>了不起的蓋茨比</h1>
還可以設置居右：
h1{
text-align:right;
}
<h1>了不起的蓋茨比</h1>
圖文環繞
在css中有一個常見的圖文環繞效果。實現方式主要是通過float標簽，將圖片左浮動，或者右浮動。其相鄰的文字，就會環繞圖片排列，代碼和效果如下：
豎排文字
使用writing-mode實現。writing-mode屬性有兩個值lr-tb和tb-rl，前者是默認的左-右、上-下，后者是上-下、右-左。
比如：
p{
writing-mode: tb-rl;
}
可以結合direction排版。
首字下沉
偽對象:first-letter配合font-size、float可以制作首字下沉效果。
比如：
p:first-letter{
padding: 6px;
font-size: 32pt;
float: left;
}
漢字注音
如果我們想為漢字注音，就可以使用ruby標簽和ruby-align屬性來實現，比如：
<ruby>注音<rt style="font-size:11px;">zhuyin</rt></ruby>
然后通過ruby-align設置其對齊方式。
這是一個比較冷門的技巧，可能平時使用不多，但小編覺得不妨提供給大家預防不時之需。
以上就是小編要跟大家分享的CSS網頁布局中文排版技巧，雖然很簡單，但簡單的過程中其實暗藏玄機，如果大家喜歡還請記得收藏哦~
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
