CSS 類型(type)、背景(background)

reamweaver的CSS面板分類

type(類型)

background(背景)

block(區(qū)塊)

box(方框) 或盒子意思

border(邊框)

list(列表)

positioning(定位)

extensions(擴(kuò)展)

共八個(gè)部分

1. type(類型)

type面板主要是對(duì)文字的字體，大小，顏色，效果等基本樣式進(jìn)行設(shè)置。

注意：屬性名帶*號(hào)的是指樣式效果不能在編輯文檔時(shí)顯示，要用瀏覽器打開才能看到效果。

(1)font-family：設(shè)置字體系列。什么叫字體系列呢?是指對(duì)文字設(shè)定幾個(gè)字體，當(dāng)遇到第一個(gè)字體不能顯示的文字時(shí)會(huì)自動(dòng)用系列中的第二個(gè)

字體或后面的字體顯示。

注意:一般英文字體我們用"Verdana, Arial, Helvetica, sans-serif"這個(gè)系列比較好看。如果不用這些字體系列，你就需要自己編輯字體系列，

也可以直接手動(dòng)在下拉框里寫字體名，字體之間用逗號(hào)隔開。中文網(wǎng)頁默認(rèn)字體是宋體, 一般就空著不要選取任何字體。

默認(rèn)值： not specified(取決于瀏覽器,系統(tǒng)默認(rèn)的字體, 如: 微軟雅黑)

注意：

1.如果有漢字, 那么我們要加引號(hào)

2.如果有多個(gè)英文字母組成的單詞, 我們也要加引號(hào); "microsoft yahei" 中間用空格隔開

3.font-family:"黑體","宋體","華文隸書"; 首先找黑體, 沒有黑體找宋體...

為了避免在CSS中使用 font 或 font-family 設(shè)置中文字體時(shí)亂碼, 可以使用 Unicode 編碼來表示字體。

/* 示例:使用Unicode字體編碼設(shè)置字體為"微軟雅黑" */
font-family: "\5FAE\8F6F\96C5\9ED1";

(2)font-size：定義文字的大小。你可以通過選取數(shù)字和度量單位來選擇具體的字體大小，或者你也可以選擇一個(gè)相對(duì)的字體大小。

最好使用pixels作為單位，這樣不會(huì)在瀏覽器中文本變形。一般字體用比較標(biāo)準(zhǔn)的12px或14px, 默認(rèn)值為16px。

注意：CSS中長度的單位分絕對(duì)長度單位和相對(duì)長度單位:

絕對(duì)長度單位有：

pt：磅(point)

mm、cn、in、pc：(毫米、厘米、英寸、活字)根據(jù)顯示的實(shí)際尺寸來確定長度。

此類單位不隨顯示器的分辨率改變而改變。

相對(duì)長度單位有：

px：(像素)根據(jù)顯示器的分辨率來確定長度。

em：當(dāng)前文本的尺寸。例如：{font-size:2em}是指文字大小為原來的2倍。

比如自身font-size: 30px; 那么此時(shí)1em=30px;

ex：當(dāng)前字母"x"的高度，一般為字體尺寸的一半。

%：是以當(dāng)前文本的百分比定義尺寸。例如：{ font-size:300%}是指文字大小為原來的3倍。

small、large：表示比當(dāng)前小一個(gè)級(jí)別或大一個(gè)級(jí)別的尺寸。

默認(rèn)值：medium(標(biāo)準(zhǔn)大小)

(3)font-style：定義字體樣式為normal、italic、oblique。默認(rèn)設(shè)置為normal。

注意： italic 斜體 oblique 歪斜體 italic和oblique實(shí)際效果是一樣的。

默認(rèn)值:normal

(4)line-height：設(shè)置文本所在行的行高。默認(rèn)為normal。可以是行內(nèi)元素、行內(nèi)塊元素, 通常與height設(shè)置的高度值相同, 可以做到垂直居中的作用。

你也可以自己鍵入一個(gè)精確的數(shù)值并選取一個(gè)計(jì)量單位。

比較直觀的寫法用百分比, 例如140%是指行高等于文字大小的1.4倍。

最常用的方法: line-height:1.5em; /*行間距,相對(duì)數(shù)值,1.5倍行距,*/ 可有效的避免文字發(fā)生重疊

默認(rèn)值： normal

(5)text-decoration：在文本中添加underline(下劃線)、overline(上劃線)、line-through(中劃線)、blink(閃爍效果)。

這些效果可以同時(shí)存在，將效果前的復(fù)選框選定即可。

注意：鏈接的默認(rèn)設(shè)置是underline，我們可以通過選none去除下劃線。blink(閃爍效果)只在mozilla瀏覽器里可以看到, IE、opera不支持

默認(rèn)值： none

(6)font-weight：給字體指定粗體字的磅值。

normal 默認(rèn)值。定義標(biāo)準(zhǔn)的字符。

bold 定義粗體字符。

bolder 定義更粗的字符。

lighter 定義更細(xì)的字符。

100

200

300

400

500

600

700

800

900

inherit 規(guī)定應(yīng)該從父元素繼承字體的粗細(xì)。

定義由粗到細(xì)的字符。400 等同于 normal, 而 700 等同于 bold。

默認(rèn)值: normal

(7)font-variant：允許你選取字體的變種, 選small-caps(小型大寫字母)時(shí), 此樣式區(qū)域內(nèi)所有字母大寫。

normal表示正常的字體, 為默認(rèn)值；

默認(rèn)值: normal

(8)text-transform：將選區(qū)中每個(gè)單詞的第一個(gè)字母轉(zhuǎn)為大寫, 或者令單詞全部大寫或全部小寫。

參數(shù)：capitalize(單詞首字母大寫)、uppercase(轉(zhuǎn)換成大寫)、lowercase(轉(zhuǎn)換成小寫)、none(不轉(zhuǎn)換)。

默認(rèn)值：none

(9)color：定義文字顏色。包括對(duì)表單輸入的文字顏色。

CSS中顏色的值有三種表示方法：

#RRGGBB格式，是由紅綠藍(lán)三種顏色的值組合，每種顏色的值為"00 – FF"的兩位十六進(jìn)制正整數(shù)。

例如：#FF0000表示紅色，#FFFF00表示黃色。

rgb(R,G,B)格式, RGB為三色的值, 取0~255, 例如：rgb(255,0,0)表示紅色, rgb(255,255,0)表示黃色。

用顏色名稱。CSS可以使用已經(jīng)定義好的顏色名稱。例如：red表示紅色, yellow表示黃色。

顏色值的縮寫:

p{color:#000000} 可以縮寫為：p{color:#000}

p{color:#336699} 可以縮寫為：p{color:#369}

默認(rèn)值： not specified

color: transparent; 透明色

rgba() 解釋: rgba(紅0-255, 綠0-255, 藍(lán)0-255, 透明度0-1)

注意: 如果文字的顏色通過單獨(dú)的類選擇去設(shè)置沒有改變顏色, 則應(yīng)該通過組合選擇器(.header .top .topR .blue)去設(shè)置, 改變它的優(yōu)先級(jí)。

2. background(背景)

background面板主要是對(duì)元素的背景進(jìn)行設(shè)置，包括背景顏色、背景圖象、背景圖象的控制。

一般是對(duì)body(頁面)、table(表格)、div(區(qū)域)的設(shè)置。

(1)background-color：設(shè)置元素的背景色。包括對(duì)input表單輸入框的背景顏色;

默認(rèn)值: transparent(背景顏色為透明)

rgba() 解釋: rgba(紅0-255, 綠0-255, 藍(lán)0-255, 透明度0-1) 一般用于背景色

(2)background-image：設(shè)置元素的背景圖像。

默認(rèn)值:none

CSS3支持多重背景圖,只要加上一個(gè)url指定圖片路徑,并用逗號(hào)(,)將兩組url分隔就可以了

background-image:url(a.jpg),url(b.jpg);

base64使用

background-image: url("data:image/png;base64,iVBORw0KGgo=...");

(3)background-repeat：確定背景圖像是否以及如何重復(fù)。

repeat 默認(rèn)值。背景圖像將在垂直方向和水平方向重復(fù)。

repeat-x 背景圖像將在水平方向重復(fù)。

repeat-y 背景圖像將在垂直方向重復(fù)。

no-repeat 背景圖像將僅顯示一次。

inherit 規(guī)定應(yīng)該從父元素繼承background-repeat屬性的設(shè)置。

注意：如果定義的元素的body，可以控制頁面背景是否重復(fù)。

默認(rèn)值: repeat

(4)background-attachment：固定背景圖像或者跟隨內(nèi)容滾動(dòng)。

參數(shù)fixed表示固定背景(不隨屏幕滾動(dòng)而滾動(dòng)，決定背景圖像是否要固定在原來的位置), scroll表示跟隨內(nèi)容滾動(dòng)的背景。

注意：如果定義的元素的body, 可以使頁面背景固定。

默認(rèn)值: scroll

(5)background-position(X)：指定背景圖像的水平位置。

可以指定為left(左邊), center(居中)，right(右邊)；

也可以指定數(shù)值，如20px是指背景距離左邊20象素。

background-position(Y)：指定背景圖像的垂直位置。

可以指定為top(頂部), center(居中), bottom(底部)；也可以指定數(shù)值。

background-position屬性值:

left top

center top

right top

left center

center center

right center

left bottom

center bottom

right bottom

如果您僅規(guī)定了一個(gè)關(guān)鍵詞，那么第二個(gè)值將是"center"。

注意:采用英文單詞的水平位置和垂直位置的屬性值可以調(diào)換

x% y% 第一個(gè)值是水平位置，第二個(gè)值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果您僅規(guī)定了一個(gè)值，另一個(gè)值將是 50%。

xpos ypos 第一個(gè)值是水平位置，第二個(gè)值是垂直位置。左上角是 0 0。單位是像素 (0px 0px) 或任何其他的 CSS 單位。

如果您僅規(guī)定了一個(gè)值，另一個(gè)值將是50%。

您可以混合使用 % 和 position 值。

默認(rèn)值：0% 0%

文是站在一個(gè)網(wǎng)頁設(shè)計(jì)師的角度，所寫的關(guān)于最佳字體排版實(shí)踐的手冊(cè)，包括字體排版設(shè)計(jì)、Web 字體、Web 樣式指導(dǎo)等四個(gè)方面，而且每一章后都有擴(kuò)展閱讀幫你深入了解細(xì)節(jié)，全程高能干貨，建議閱讀。

簡介
字體排版設(shè)計(jì)

視覺層次
字體排版中的格式塔原則

字體

選擇字體
使用web字體
字體加載
OpenType的特性

Web 樣式指導(dǎo)

相對(duì)大小
容器
字體尺寸
垂直間隔
顏色
下劃線

總結(jié)

簡介

字體排版絕不僅僅是使用字體那么簡單，它包括了關(guān)于文字”看上去會(huì)是怎么樣？”的所有事情——例如文字的大小，行高，顏色甚至文字間留白這樣的細(xì)枝末節(jié)的小事。一個(gè)好的文字排版會(huì)為你所寫的內(nèi)容定下情感基調(diào)，并且可以幫助讀者更好的理解其內(nèi)容和語境。

為了讓你使用起來更像是在看一本參考書而不是說明書，本文將會(huì)非常精簡清晰，如果你想進(jìn)一步的了解更多細(xì)節(jié)，可以點(diǎn)擊查看在每一章中的”擴(kuò)展閱讀”去深入了解。

這本手冊(cè)將會(huì)在GitHub上開源，并且會(huì)持續(xù)更新一些最佳實(shí)踐的范例，希望你們喜歡！

字體排版設(shè)計(jì)

視覺層次

視覺層次是一種理念，它意在傳達(dá)頁面中的元素應(yīng)該依照其重要性進(jìn)行組織排版，以便讀者可以很容易的通覽整個(gè)頁面，找到相關(guān)的內(nèi)容。一個(gè)好的視覺層次可以引導(dǎo)讀者在閱讀時(shí)候的視覺流向。視覺層次被廣泛運(yùn)用于文字排版中，它構(gòu)成了文字排版設(shè)計(jì)的理論基石。

請(qǐng)看下圖的”愛麗絲夢游仙境”的字體排版設(shè)計(jì)，它展現(xiàn)了一個(gè)清晰的視覺層次：

點(diǎn)擊這里查看網(wǎng)頁上的實(shí)際效果

視覺層次可以被分成以下4個(gè)部分：

字體大小 & 字體重量：設(shè)置字體大小和字體重量是兩種構(gòu)建視覺層次的最簡單的方式。他們可以很容易地告訴讀者什么地方是最重要的，引導(dǎo)讀者的目光落到這里的內(nèi)容上來。只是簡單地為文字加上這兩種樣式，文章的重點(diǎn)便一目了然了。
定位：元素定位是另外的一種構(gòu)建視覺層次的方式，就像上圖中，文章的標(biāo)題和作者信息通過置頂和居中表明了它們的重要性。
字體：通過使用有對(duì)比度的字體可以提高不同元素之間的辨識(shí)度，從而構(gòu)建視覺層次
顏色：為重要的文字設(shè)置不同的顏色也是一種非常簡單的構(gòu)建視覺層次的方式。然而使用這種方式的時(shí)候一定要小心，因?yàn)轭伾臑E用可能會(huì)造成重點(diǎn)部分辨識(shí)度的降低。

擴(kuò)展閱讀：

Visual Hierarchy： How Well Does Your Design Communicate?
Creating Exciting And Unusual Visual Hierarchies

字體排版中的格式塔原則

格式塔原則，或格式塔法則，是一種構(gòu)建感性認(rèn)知的規(guī)律。當(dāng)我們觀察這個(gè)世界的時(shí)候，我們通常會(huì)意識(shí)到，一個(gè)復(fù)雜的場景是由多個(gè)在某些背景之上的物體構(gòu)成的，而這些物體則是由更小的一些物體構(gòu)成的，依此循環(huán)下去。

在字體排版中我們需要理解的兩個(gè)很重要的格式塔原則就是”距離原則”和”相似原則”。.

距離原則

為了更好地掌握元素定位的方法，了解距離原則是很重要的。距離原則表明，人們會(huì)將靠得近的物體視為有關(guān)聯(lián)的物體，反之，隔得比較遠(yuǎn)的物體將會(huì)被看成屬于不同類別。

點(diǎn)擊此處查看原圖

在字體排版設(shè)計(jì)中，”距離”指的是通過設(shè)置行高、內(nèi)間距和外間距所制造出來的留白空間。在兩段不同的段落之間應(yīng)該留有明顯的并且易于區(qū)分的留白間隔，請(qǐng)看下面的例子：

注意啦，你覺得應(yīng)該把內(nèi)容相關(guān)的部分都擠到一個(gè)很小的空間中去嗎？當(dāng)然不是這樣，自由隨意的留白也是很重要的。距離原則告訴我們，只需要為那些沒有關(guān)系的段落之間額外的加上一些易于區(qū)分的留白就可以了

相似原則

格式塔的相似原則告訴大家，看起來很像的東西會(huì)被認(rèn)為是一類的東西。舉個(gè)例子，如果所有可點(diǎn)擊的文字被設(shè)置為天藍(lán)色，那么讀者就會(huì)認(rèn)為文章中所有天藍(lán)色的文字內(nèi)容都是可以點(diǎn)擊的。

在字體排版中，相似原則就意味著，擁有同樣功能的元素應(yīng)該在樣式上保持一致。如果兩組元素的功能相似的話，那么它們也應(yīng)該看起來很像才對(duì)。例如，兩篇同為博客帖子的文章應(yīng)該看起來很像。而相反的，兩個(gè)功能不相同的元素也應(yīng)該看起來不像。

擴(kuò)展閱讀：

Gestalt Theory in Typography & Design Principles
Proximity， Uniform Connectedness & Good Continuation

字體

選擇字體

選擇字體是一個(gè)具有創(chuàng)造性和情感的過程。不同的字體可以傳達(dá)不同的情感，你可以盡情挑選一個(gè)合適的字體讓你的文字感情變得豐沛起來。

首先為你的文字的正文挑選一個(gè)合適的字體，當(dāng)你需要搭配不同字體的時(shí)候，記得要保持正文字體的不變，然后試著依據(jù)這個(gè)字體選擇和它相搭配的其他字體。
使用一些例如TypeTester 和 TypeCast 這一類的工具會(huì)讓你進(jìn)行字體選擇的時(shí)候輕松一些。
從他人處獲得靈感! Fonts In Use提供了大量的優(yōu)秀的字體搭配范例。
有些字體本來就是為用作大標(biāo)題而設(shè)計(jì)的，而有些字體天生就只適合那些小屏幕，你要依照每個(gè)字體的”天性”去使用它們。你可以在WebType 上面找到對(duì)于不同字體而言合適的尺寸。此外 TypeKit也標(biāo)明了其上的字體是適合標(biāo)題或者是正文。

擴(kuò)展閱讀：

Selecting Typefaces For Body Text
Five Principles For Choosing And Using Typefaces
Best Practices For Combining Typefaces

使用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;
}

為了達(dá)到最大程度上的兼容，我們建議使用上面列出的格式。或者，只使用 woff2 和 woff也會(huì)支持大部分的現(xiàn)代瀏覽器。

你需要為每個(gè)列出來的格式提供一個(gè)相應(yīng)的字體文件。推薦使用 Transfonter 或者FontSquirrel’s Web Font Generator，這樣你就可以在只有一個(gè)字體文件的情況下，將其轉(zhuǎn)換成不同的文件格式。

盡可能的壓縮你的字體文件。點(diǎn)擊這里查看更多信息。

將多個(gè)同源字體文件（細(xì)體、常規(guī)、半粗體、粗體等等）合并成一個(gè)font-family，盡量不要為每個(gè)字體都起一個(gè)新的font-family的名字。

或者，你也可以通過線上字體資源服務(wù)，如Google Fonts 或者 Typekit引入你想要的字體。

擴(kuò)展閱讀：

Further Hardening Of The Bulletproof Syntax
FontSquirrel： How To Use The Generator

加載字體

在你引入的字體被渲染出來之前，他們需要先進(jìn)行加載。下面是三種在加載的時(shí)候可能會(huì)發(fā)生的事情：

引入的字體沒有被識(shí)別出來，字體應(yīng)用了備用字體。
引入的字體雖然被識(shí)別出來但是沒有加載，他需要在下載完成之后才會(huì)被應(yīng)用。
引入的字體被成功識(shí)別并迅速應(yīng)用。

場景1只發(fā)生在你嘗試使用一個(gè)不存在的字體，或者聲明時(shí)候的src指向了一個(gè)壞鏈，這種情況可以并且應(yīng)該徹底避免。接著我們跳到場景3，這種情況通常在字體被正確的緩存的時(shí)候發(fā)生，也是我們喜聞樂見的。場景2中包含著字體加載的過程，字體加載通常是難以避免的（至少是在第一次請(qǐng)求的時(shí)候），下面是幾種處理方式：

1. 文檔樣式閃爍方案（FOUT）

FOUT是指網(wǎng)頁會(huì)在切換到合適的網(wǎng)頁字體之前，使用默認(rèn)或者備選字體顯示文字。這種情況的出現(xiàn)是因?yàn)橹挥挟?dāng)HTML和CSS都被下載完成之后，字體請(qǐng)求才會(huì)發(fā)出。這就意味著，在HTML被顯示出來而字體文件沒有被完全下載下來中間存在著一段”空檔”時(shí)間。 FOUT 算是對(duì)大部分的網(wǎng)頁而言的最佳選擇，主要是其他的選擇也許更糟。如果使用得到的話，F(xiàn)OUT 很難被用戶察覺出來。

2. 不可見文本閃爍方案（FOIT）

很多年前，一些現(xiàn)代瀏覽器開始使用一種新的技術(shù)來處理字體加載的問題 — FOIT. FOIT是指當(dāng)瀏覽器檢測到字體正在加載的時(shí)候，隱藏應(yīng)用這段字體的文字，直到字體完全下載完才將其顯示出來。然而我們應(yīng)該避免這種做法雖然這樣做從理論上看起來還不錯(cuò)，但是這會(huì)帶給那些網(wǎng)絡(luò)速度比較差的用戶十分糟糕的體驗(yàn)。有可能會(huì)在最初的FOIT后出現(xiàn)FOUT，最壞的情況可能會(huì)是這段文字將永遠(yuǎn)看不到了。

3. 白屏方案

即在字體加載完成之前，整個(gè)網(wǎng)頁都處于不可見的狀態(tài)，或者也可以采用顯示一個(gè)進(jìn)度條.我們只推薦當(dāng)FOUT 嚴(yán)重影響用戶體驗(yàn)的時(shí)候使用這種方法。我們通常在一個(gè)網(wǎng)頁需要大面積顯示一個(gè)特定的字體的時(shí)候使用該方法，否則，F(xiàn)OUT 總會(huì)我們的第一選擇，因?yàn)椤眱?nèi)容至上”。白屏方案與 FOIT很相似，但對(duì)于你來說，你擁有控制在什么時(shí)候給用戶展示你的內(nèi)容的自由，這種感覺會(huì)似乎更棒一些，不是嗎？而且在FOIT方案中，不可見的文本有時(shí)候會(huì)給讀者帶來困惑，而徹底的白屏（或者一個(gè)進(jìn)度條）會(huì)讓人很自然的覺得是一個(gè)正在加載的信號(hào)。

不管你是打算使用 FOUT 方案或者白屏方案，我們都推薦您使用Web Font Loader這個(gè)JavaScript庫. Web Font Loader 可以讓你對(duì) @font-face加以控制，而且你也為字體加載的體驗(yàn)添加控制事件。

注意：有一個(gè)W3C 字體加載 API也會(huì)實(shí)現(xiàn)同樣的功能，但是它現(xiàn)在的支持不是很好_

FOUT 方案

下面是一個(gè)使用 Web Font Loader 實(shí)現(xiàn)了 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 很重要，只有這樣做才不會(huì)延誤頁面其他部位的渲染。

寫樣式的時(shí)候，讓你的備用字體盡可能近的靠近你的實(shí)際字體，這樣才能最大程度的減少 FOUT造成的影響.點(diǎn)擊這里你將會(huì)看到一系列的備選字體. 使用這個(gè)工具你將很容易的看到備選字體和你引入的字體的對(duì)比效果.

白屏方案

下面是一個(gè)使用 Web Font Loader 實(shí)現(xiàn)了白屏方案的例子：

<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>

在這個(gè)例子里面，備選字體不需要和你引入的字體看起來很像，因?yàn)槲覀儾粫?huì)用到 FOUT. 依照你自己的喜好去選擇備選字體吧。

如果你想要用一個(gè)進(jìn)度條取代白屏，你可以使用Pace。這種方法在用戶體驗(yàn)上效果會(huì)更好一些，特別是當(dāng)字體文件很大的時(shí)候。

擴(kuò)展閱讀：

Type Study： Choosing Fallback Fonts
FOUT， FOIT， FOFT
Web Font Optimization

OpenType 的特性

OpenType 的特性可以被視為文字進(jìn)行字體排版時(shí)的可選項(xiàng)，它們被用來加強(qiáng)文字的表現(xiàn)和易讀性。

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 特性被放置于字體之中，這就意味著對(duì)于不同的字體，會(huì)有不同的特性，在使用這些特性之前，我們需要看一看我們的字體是否支持這些特性。

使用 font-feature-settings來激活 OpenType 特性. 由于目前對(duì)于這個(gè)屬性的支持不好，我們需要在屬性之前加上前綴。

Kerning kern， ligatures liga， contextual ligatures clig，和 contextual alternatives calt這四種適用于所有字體中 ######( 譯者注：font-feature-settings這種屬性僅支持拉丁文語系的字體使用，并不支持中文哦！ )

擴(kuò)展閱讀：

Caring About OpenType Features
Death To Typewriters
Web Font Optimization

Web Style Guide

相對(duì)大小

盡可能的使用相對(duì)大小。

html { font-size： 100% }
p { font-size： 1em }
@media (min-width： 64em) {
 html {
 font-size： 112.5%;
 }
}

font-size： 100% 與瀏覽器的字體大小設(shè)定保持一致而不是去覆寫它，根據(jù)大多數(shù)的瀏覽器的默認(rèn)設(shè)置，這里也可以用1em 代替表示 16px.
通過改變html 的 font-size會(huì)影響到所有單位為 em和rem 的元素.如果是對(duì)于響應(yīng)式設(shè)計(jì)的網(wǎng)頁，這樣做還是比較實(shí)用的。
用戶的選擇也很重要，所有不要偏離 font-size： 100%和1em太遠(yuǎn).
對(duì)于font-size建議使用rem 和 em.
對(duì)于一些元素定位如margin， padding等等，建議使用 rem， em，或者 % 。
對(duì)于媒體查詢中尺寸建議使用em.
對(duì)于一些大的標(biāo)題字或者配有圖片的字，可以使用FitText來實(shí)現(xiàn)標(biāo)題的縮放。盡量避免使用vw 和 vh因?yàn)楝F(xiàn)在的支持還不是很好，難于精確的配置，并且對(duì)于一些瀏覽器的字體和縮放設(shè)置并不適配。

擴(kuò)展閱讀：

Type Study： Sizing The Legible Letter
5 Useful CSS Tricks for Responsive Design
REM vs EM – The Great Debate
PX， EM or REM Media Queries?

容器

容器，或者稱為包裝，指的是用來包裹一個(gè)或者多個(gè)元素的HTML元素。它將元素分組，從而更好進(jìn)行語義化、修飾以及布局。

html {
 box-sizing： border-box;
}
*，
*：before，
*：after {
 box-sizing： inherit;
}
.container {
 max-width： 67rem;
 padding-left： 1.5rem;
 padding-right： 1.5rem;
}

強(qiáng)烈建議使用 box-sizing： border-box. 點(diǎn)擊這里查看更多信息。
左/右內(nèi)間距與最大寬度聯(lián)合使用可以很容易地創(chuàng)建一個(gè)移動(dòng)端友好的容器。
要為容器選擇一個(gè)合適的寬度，既不能太大（因?yàn)樘蟮脑捵x者的眼睛難以聚焦）也不能太小（這樣讀者的眼睛需要經(jīng)常移動(dòng)才可以看清）。永遠(yuǎn)記住，在進(jìn)行網(wǎng)頁字體排版的時(shí)候，沒有一個(gè)適合所有字體、尺寸、行距和分辨率的鐵律，你需要自己來做決定。

擴(kuò)展閱讀：

* { Box-sizing： Border-box } FTW
StackOverflow： Ideal Column Width For Paragraphs Online

字體大小

使用縮放模塊可以幫助你決定在你的元素上面應(yīng)用怎樣的font-size .縮放模塊指的是依照其內(nèi)容安排的一系列比較合適的字體大小的數(shù)值。

縮放模塊的說明. 點(diǎn)擊此處

我們可以在編寫CSS的一開始使用縮放模塊，將它作為一個(gè)參考。
值的注意的是，盡管不同的字體有著不同的大寫字母高度和x字母高度，可是大多數(shù)的模塊化縮放工具都沒有將這些考慮在內(nèi)。
在你的樣式表中，建議將你所使用到的縮放模塊工具的配置信息寫在注釋之中。

響應(yīng)式的縮放模塊

只使用單獨(dú)的一個(gè)縮放模塊方案并不一定適合所有分辨率的設(shè)備，為了解決這個(gè)問題，你可以依據(jù)用戶的設(shè)備的分辨率的不同提供不同的縮放方案

//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);
}

擴(kuò)展閱讀：

More Meaningful Typography
The Typographic Scale

垂直距離

文字間的垂直距離是由 line-height， margin，和padding構(gòu)建出來的.

line-height 不應(yīng)該帶有單位。比較寬的容器里面文字的行高會(huì)大一些，而那些比較窄的容器里面行高相對(duì)來說小一些會(huì)比較合適。
為那些具有單方向的文本元素添加margin屬性，建議使用margin-bottom.
要遵循距離原則.

垂直節(jié)律

垂直節(jié)律是指元素之間的垂直間隔要保持一致性。這一點(diǎn)十分重要，它可以帶給讀者視覺上放松的享受，給他們一種親近的感覺。

Image source建立垂直節(jié)律很簡單。首先，確定你使用的基礎(chǔ)垂直內(nèi)間距和基礎(chǔ)垂直外間距的數(shù)值。然后，為你的容器，文字性元素或者其他相關(guān)元素的單方向的外邊距（或者內(nèi)邊距）應(yīng)用這個(gè)數(shù)值。如果你需要制制造更大的間隔的話，應(yīng)用這個(gè)數(shù)值的倍數(shù)就好啦!

將基礎(chǔ)間距的數(shù)值設(shè)置成與行高相同的數(shù)值，這樣你的文字就像寫在一個(gè)條格紙上那樣整齊，就像我們傳統(tǒng)的印刷字體設(shè)計(jì)的那樣。然而，想要文字擁有垂直節(jié)律不一定需要按照上面的方法來做，只要你設(shè)置了一個(gè)基礎(chǔ)間距，并且使得其他間距都是由這個(gè)間距成倍的得來的，那樣就可以了。

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;
}

文字底部對(duì)齊基線網(wǎng)格

文字底部對(duì)齊基線是垂直節(jié)律的一個(gè)更為嚴(yán)格的實(shí)現(xiàn)。在網(wǎng)頁中，文字通常在line-height間居中對(duì)齊.但對(duì)于較大的文字來說會(huì)比較討厭，因?yàn)檫@樣做會(huì)導(dǎo)致在頂部和底部留有太多的空間。在傳統(tǒng)印刷的時(shí)候，這個(gè)問題一般會(huì)通過讓文字對(duì)齊基線網(wǎng)格的底部得以解決。

我們也可以通過為較大的文字添加一個(gè)負(fù)的margin-top和一個(gè)較小的margin-bottom，不需要使用基線網(wǎng)格而解決這個(gè)問題。

圖片資源為不同的字體樣式、字體大小和分辨率添加一個(gè)底部對(duì)齊的基線網(wǎng)格并不是一個(gè)很容易的方式，所以強(qiáng)烈建議你使用一個(gè)字體排版基線庫例如 Sassline 或者 MegaType.

注意，垂直節(jié)律只是一個(gè)建議，而且基線網(wǎng)格也只是想象出來的。所以我們不需要在每個(gè)使用場合都遵循這個(gè)規(guī)律，也不用在每個(gè)元素中都去追求像素級(jí)別的完美。

擴(kuò)展閱讀：

Why is Vertical Rhythm an Important Typography Practice?
Aligning type to baseline the right way using SASS
Is Web Typography Completely Broken?
Single-direction Margin Declarations

顏色

顏色可以很大程度上的增加視覺辨識(shí)度，是字體排版中一個(gè)重要的組成部分。

不要隨心所欲的挑選顏色，建議使用顏色板，建議你使用 Material Design colors 和 Flat UI colors 中提供的顏色板進(jìn)行顏色選擇.
不要過度濫用一個(gè)顏色，因?yàn)檫@樣會(huì)造成辨識(shí)度的降低，同樣也不要使用很多完全不同的顏色。
遵循相似原則.
不建議使用純黑 #000 作為你的正文顏色，你可以選擇一個(gè)非常灰的顏色如#333.
有時(shí)候，使用透明顏色比使用淺色會(huì)更好一些，如果你深入的了解，可以點(diǎn)擊這里。
確保文字和背景有較大的對(duì)比度，你可以使用這個(gè)對(duì)比度檢測工具幫助你進(jìn)行選擇.

####擴(kuò)展閱讀：

Magic Of CSS： Color
Google Style – Color

下劃線

在印刷品里，永遠(yuǎn)都不要使用到下劃線，因?yàn)檫@樣做會(huì)影響文字的閱讀，重點(diǎn)是，它很丑！Practical Typography

一般的來說，在網(wǎng)頁中下劃線也會(huì)看起來并不美好！幸運(yùn)的是， background-image 就包含一個(gè)方法，它可以使得下劃線變得好看一點(diǎn)。下面是Adam Schwartz使用Sass實(shí)現(xiàn)的下劃線的例子：

@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 是一個(gè)簡化這個(gè)工作的庫。建議你只在有鏈接的地方使用下劃線，這是大多是網(wǎng)站都遵循的規(guī)律，如果不這么做的話，可能會(huì)引起誤解。

擴(kuò)展閱讀：

Crafting Link Underlines On Medium
Smarter Link Underlines For Every Website

總結(jié)

恭喜你，你已經(jīng)快讀完這篇手冊(cè)了。在web，這種用戶可以在任何分辨率的設(shè)備上使用的媒介上進(jìn)行字體排版是及其困難的。在很多年前，當(dāng)我第一次開始設(shè)計(jì)網(wǎng)頁的時(shí)候，我發(fā)現(xiàn)幾乎找不到最新的關(guān)于最佳WEB字體排版實(shí)踐的信息。很多專家發(fā)表的博客文章內(nèi)容相互矛盾，而且很多市面上的web字體排版的書籍也很少談及具體技術(shù)應(yīng)用的細(xì)節(jié)。字體排版手冊(cè)希望可以解決這個(gè)問題，并且為菜鳥們提供應(yīng)該了解的關(guān)于如何創(chuàng)建符合字體排版工業(yè)標(biāo)準(zhǔn)的全部知識(shí)。我希望這個(gè)成果可以令你滿意。

請(qǐng)私信我回復(fù)“666”，為嚴(yán)哥打Call~，還有更多驚喜哦~

.............................................................

UI嚴(yán)選—越努力，越幸運(yùn)

字是網(wǎng)頁展示的重要內(nèi)容之一，所以對(duì)文字的修飾也是CSS重點(diǎn)關(guān)注的一部分， CSS提供了以下常用的樣式屬性來修飾文字。

color 屬性

color 用來設(shè)置文字顏色。

設(shè)置方式支持以下幾種格式

英語顏色單詞形式，如: red（紅）、black（黑）、orange（橙色）等。

<style>
  .box {
    color: red;
  }
</style>


<div class="box">文字顏色</div>

十六進(jìn)制表示法，設(shè)計(jì)軟件中通用的表示方法。
例如：ff00000; ff 即為十進(jìn)制255；每種顏色分為 0~255的數(shù)字。
如果表示顏色值重復(fù) 例如：#ffaabb 可以簡寫為#fab.。
黑色為 #000 ，白色為 #fff。
以#ff0000為例，兩兩分組，分別表示三原色：紅、綠、藍(lán)。

<style>
  .box {
    color: #ff0000;
  }
  .box1 {
    color: #f00;
  }
</style>


<div class="box">文字顏色</div>
<div class="box1">簡寫形式</div>

RGB 表示法
例如: color: rgb(255,0,0); rgb 內(nèi)部的三個(gè)值，依次代表三原色紅、綠、藍(lán)。
其中 rgb(0,0,0) 代表黑色， rgb(255,255,255) 表示白色。

<style>
  .box {
    color: rgb(255, 0, 0);
  }
</style>
<div class="box">文字顏色</div>

RGBA 表示法，在RGB的表示方法的基礎(chǔ)上增加了透明度（最后一個(gè)參數(shù)代表透明度）。0-表示透明 1-表示實(shí)心。透明度是介于[0,1]之間的值。
RGBA 從 IE9開始兼容。

<style>
.box {
  color: rgba(255, 0, 0, 0.5);
}
</style>




<div class="box">文字顏色</div>

font-size 屬性

font-size 屬性用來設(shè)置字體大小，單位通常為px 也可以為em,rem

單位的解釋

px：像素
em: 相對(duì)元素字體的倍數(shù)
rem：相對(duì)html字體的倍數(shù)，例如：html標(biāo)簽設(shè)置為font-size為100px ， div 設(shè)置font-size為1.5 rem 實(shí)際表現(xiàn)為：150px。

<style>
  .box {
    font-size: 30px;
  }
</style>


<div class="box">文字大小</div>

font-weight 屬性

設(shè)置字體的粗細(xì)程度，常用的屬性有 normal 和 bold 兩個(gè)值。

可以用以下值表示，也可以用數(shù)字表示。

值	意義
normal	正常粗細(xì)，和400值相等
bold	加粗，與700數(shù)值相等
lighter	比正常粗細(xì)還細(xì)，不常用
bolder	比加粗還粗，不常用
100 200 300 400 500 600 700 800 900	使用數(shù)字定義字體粗細(xì)
inherit	從父元素繼承字體粗細(xì)

<style>
.box_normal {
  font-weight: normal;
}
.box_bold {
  font-weight: bold;
}


.box_lighter {
  font-weight: lighter;
}


.box_bolder {
  font-weight: bolder;
}


.box_number {
  font-weight: 600;
}
</style>


<body>
  <div class="box_normal">font-weight演示：正常粗細(xì)</div>
  <div class="box_bold">font-weight演示，加粗</div>
  <div class="box_lighter">font-weight演示，更細(xì)</div>
  <div class="box_bolder">font-weight演示， 更粗</div>
  <div class="box_number">font-weight演示， 數(shù)字</div>
</body>

font-style 屬性

設(shè)置字體的傾斜程度

值	意義
normal	正常字體，不帶傾斜效果
italic	傾斜字體（常用，使用傾斜字體）
oblique	傾斜字體（用常規(guī)字體模擬傾斜，不常用）

<style>
  .box1 {
    font-style: normal;
  }
  .box2 {
    font-style: italic;
  }
  .box3 {
    font-style: oblique;
  }
</style>
<body>
  <div class="box1">正常字體</div>
  <div class="box2">傾斜字體</div>
  <div class="box3">傾斜字體2</div>
</body>

text-decoration 屬性

設(shè)置文本的修飾線的樣式

示例	意義
none	無線(a標(biāo)簽去除下劃線會(huì)用到)
underline;	下劃線
line-through;	刪除線
…等等	還有很多，可自行百度

<style>
  .decoration-none {
    text-decoration: none;
  }
  .decoration-underline {
    text-decoration: underline;
  }
  .decoration-line-through {
    text-decoration: line-through;
  }
</style>
<body>
  <div class="decoration-none">無線修飾</div>
  <div class="decoration-underline">下劃線</div>
  <div class="decoration-line-through">刪除線</div>
</body>

font-family 屬性

指定使用的字體族，操作系統(tǒng)一般自帶很多字體；

例如：window操作系統(tǒng)中的 ‘微軟雅黑’ ，黑體等。

字體文件的格式有很多，比如 eot,woff2,woff,ttf,svg等。

font-family 可以一次指定多個(gè)字體，后面的字體屬于后備字體，只有前面的字體沒有找到，才會(huì)使用后面的字體。

<style>
  div {
      font-family: serif, "Time New Roman", "微軟雅黑"
  }
</style>
<body>
  <div>字體</div>
</body>

自定義字體

某些時(shí)候，我們的字體比較個(gè)性化，或者我們的字體是一個(gè)圖標(biāo)字體（一種用符號(hào)表示圖片的方式）。那么此時(shí)，需要我們使用 @font-face 自定義字體

自定義的字體一般是隨著網(wǎng)頁發(fā)布在服務(wù)器端，操作系統(tǒng)中并沒有。

推薦一個(gè)比較好用的字體庫網(wǎng)站：https://www.iconfont.cn/（具體使用方式請(qǐng)自行百度）。

在線咨詢

上一篇：HTML表格標(biāo)簽的使用方法與示例
下一篇：16.HTML 表單提交

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

CSS 類型(type)、背景(background)

color 屬性

font-size 屬性

font-weight 屬性

font-style 屬性

text-decoration 屬性

font-family 屬性

您的項(xiàng)目需求