SS3 @font-face 規(guī)則

以前CSS3的版本，網(wǎng)頁(yè)設(shè)計(jì)師不得不使用用戶計(jì)算機(jī)上已經(jīng)安裝的字體。

使用CSS3，網(wǎng)頁(yè)設(shè)計(jì)師可以使用他/她喜歡的任何字體。

當(dāng)你發(fā)現(xiàn)您要使用的字體文件時(shí)，只需簡(jiǎn)單的將字體文件包含在網(wǎng)站中，它會(huì)自動(dòng)下載給需要的用戶。

您所選擇的字體在新的CSS3版本有關(guān)于@font-face規(guī)則描述。

您"自己的"的字體是在 CSS3 @font-face 規(guī)則中定義的。

瀏覽器支持

表格中的數(shù)字表示支持該屬性的第一個(gè)瀏覽器版本號(hào)。

Internet Explorer 9+, Firefox, Chrome, Safari, 和 Opera 支持 WOFF (Web Open Font Format) 字體.

Firefox, Chrome, Safari, 和 Opera 支持 .ttf(True Type字體)和.otf(OpenType)字體字體類型）。

Chrome, Safari 和 Opera 也支持 SVG 字體/折疊.

Internet Explorer 同樣支持 EOT (Embedded OpenType) 字體.

注意： Internet Explorer 8 以及更早的版本不支持新的 @font-face 規(guī)則。

使用您需要的字體

在新的 @font-face 規(guī)則中，您必須首先定義字體的名稱（比如 myFirstFont），然后指向該字體文件。

如需為 HTML 元素使用字體，請(qǐng)通過(guò) font-family 屬性來(lái)引用字體的名稱 (myFirstFont)：

實(shí)例

<style> @font-face{font-family:myFirstFont; src:url(sansation_light.woff);}div{font-family:myFirstFont;}</style>

使用粗體文本

您必須添加另一個(gè)包含粗體文字的@font-face規(guī)則：

實(shí)例

@font-face{font-family:myFirstFont; src:url(sansation_bold.woff); font-weight:bold;}

該文件"Sansation_Bold.ttf"是另一種字體文件，包含Sansation字體的粗體字。

瀏覽器使用這一文本的字體系列"myFirstFont"時(shí)應(yīng)該呈現(xiàn)為粗體。

這樣你就可以有許多相同的字體@font-face的規(guī)則。

CSS3 字體描述

下表列出了所有的字體描述和里面的@font-face規(guī)則定義：

提示：

• normal

• condensed

• ultra-condensed

• extra-condensed

• semi-condensed

• expanded

• semi-expanded

• extra-expanded

• ultra-expanded

• normal

• italic

• oblique

可選。定義字體的樣式。默認(rèn)是 "normal"。

• normal

• bold

• 100

• 200

• 300

• 400

• 500

• 600

• 700

• 800

• 900

可選。定義字體的粗細(xì)。默認(rèn)是 "normal"。

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

先,我們來(lái)看一下什么是瀑布流布局效果,比如電商網(wǎng)站 蘑菇街

原理圖:

在一個(gè)大盒子里，放置多個(gè)小盒子，小盒子的大小可以不一致，長(zhǎng)短不一樣，呈現(xiàn)一種瀑布流的效果。

使用CSS3S實(shí)現(xiàn)只需要如下4步:

1. 準(zhǔn)備圖片素材

2. 書寫相應(yīng)HTML結(jié)構(gòu)

3. 了解CSS 多欄(Multi-column) 屬性

4. 使用CSS 多欄屬性完成瀑布流布局

理了工作中用過(guò)的CSS3屬性。

選擇器

• value1~value2

p~ul 選擇p元素里面的ul

• [attribute^=value]

a[src^="https"]	選擇其 src 屬性值以 "https" 開(kāi)頭的每個(gè) <a> 元素

• [attribute$=value]

a[src$=".pdf"]	選擇其 src 屬性以 ".pdf" 結(jié)尾的所有 <a> 元素

• [attribute*=value]

a[src*="abc"]選擇其 src 屬性中包含 "abc" 子串的每個(gè) <a> 元素

• :first-of-type

p:first-of-type	選擇屬于其父元素的首個(gè) <p> 元素的每個(gè) <p> 元素

• :last-of-type

p:last-of-type選擇屬于其父元素的最后 <p> 元素的每個(gè) <p> 元素

• :only-of-type

p:only-of-type選擇屬于其父元素唯一的 <p> 元素的每個(gè) <p> 元素

• :only-child

p:only-child選擇屬于其父元素的唯一子元素的每個(gè) <p> 元素

• :nth-child(n)

p:nth-child(2)選擇屬于其父元素的第二個(gè)子元素的每個(gè) <p> 元素

• :nth-last-child(n)

p:nth-last-child(2)同上，從最后一個(gè)子元素開(kāi)始計(jì)數(shù)

• :nth-of-type(n)

p:nth-of-type(2)選擇屬于其父元素第二個(gè) <p> 元素的每個(gè) <p> 元素

• :nth-last-of-type(n)

p:nth-last-of-type(2)	同上，但是從最后一個(gè)子元素開(kāi)始計(jì)數(shù)

• :last-child

p:last-child選擇屬于其父元素最后一個(gè)子元素每個(gè) <p> 元素

• :root

:root	選擇文檔的根元素

• :empty

p:empty	選擇沒(méi)有子元素的每個(gè) <p> 元素（包括文本節(jié)點(diǎn)）

• :target

#news:target選擇當(dāng)前活動(dòng)的 #news 元素

• :enabled

input:enabled	選擇每個(gè)啟用的 <input> 元素

• :disabled

input:disabled選擇每個(gè)禁用的 <input> 元素

• :checked

input:checked選擇每個(gè)被選中的 <input> 元素

• :not(selector)

:not(p)選擇非 <p> 元素的每個(gè)元素

• ::selection

::selection選擇被用戶選取的元素部分

動(dòng)畫 animation

@keyframes 讓開(kāi)發(fā)者通過(guò)指定動(dòng)畫中特定時(shí)間點(diǎn)必須展現(xiàn)的關(guān)鍵幀樣式，來(lái)控制CSS動(dòng)畫的中間環(huán)節(jié)

animation: name duration timing-function delay iteration-count direction;
animation-name	規(guī)定需要綁定到選擇器的 keyframe 名稱。。
animation-duration	規(guī)定完成動(dòng)畫所花費(fèi)的時(shí)間，以秒或毫秒計(jì)。
animation-timing-function	規(guī)定動(dòng)畫的速度曲線。
animation-delay	規(guī)定在動(dòng)畫開(kāi)始之前的延遲。
animation-iteration-count	規(guī)定動(dòng)畫應(yīng)該播放的次數(shù)。
animation-direction	規(guī)定是否應(yīng)該輪流反向播放動(dòng)畫。

• @keyframes animation-name {keyframes-selector {css-styles;}}

animationname 定義動(dòng)畫的名稱
keyframes-selector 動(dòng)畫時(shí)長(zhǎng)的百分比。合法的值：0-100%from（與 0% 相同）to（與 100% 相同） 
css-styles 必需。一個(gè)或多個(gè)合法的 CSS 樣式屬性

• animation-fill-mode

- none 默認(rèn)值，回到初始狀態(tài)
- forwards 當(dāng)動(dòng)畫完成后，保持最后一個(gè)屬性值
- both 根據(jù)animation-direction輪流應(yīng)用forwards和backwards規(guī)則
- backwards 在 animation-delay所指定的一段時(shí)間內(nèi)，在動(dòng)畫顯示之前，應(yīng)用開(kāi)始屬性值（在第一個(gè)關(guān)鍵幀中定義）。

• animation-play-state

- running 播放
- paused 暫停

2D/3D 轉(zhuǎn)換屬性

• 2D變形（translate）
• translate 第一個(gè)參數(shù)指定X軸的位移，第二個(gè)參數(shù)指定Y軸的位移

translateX 指定X軸的位移
translateY 指定Y軸的位移
translateZ 指定Z軸的位移
translate3D 第一個(gè)參數(shù)指定X軸的位移, 第二個(gè)參數(shù)指定Y軸的位移, 第三個(gè)參數(shù)指定Z軸的位移

• 3D變形（transform）
• translate 位移
• rotate 旋轉(zhuǎn)

rotate3D(): 3D旋轉(zhuǎn)，必須指定四個(gè)參數(shù)，前3個(gè)參數(shù)分別表示旋轉(zhuǎn)的方向x y z, 第4個(gè)參數(shù)表示旋轉(zhuǎn)的角度;
rotateX(): 指定X軸的旋轉(zhuǎn)角度;
rotateY(): 指定Y軸的旋轉(zhuǎn)角度;
rotateZ(): 指定Z軸的旋轉(zhuǎn)角度;

• scale 縮放

scale(x,y) 定義 2D 縮放轉(zhuǎn)換。 
scale3d(x,y,z) 定義 3D 縮放轉(zhuǎn)換。
scaleX 通過(guò)設(shè)置 X 軸的值來(lái)定義縮放轉(zhuǎn)換。 
scaleY 通過(guò)設(shè)置 Y 軸的值來(lái)定義縮放轉(zhuǎn)換。 
scaleZ 通過(guò)設(shè)置 Z 軸的值來(lái)定義 3D 縮放轉(zhuǎn)換

• skew 斜切