|
下面我們要為header應(yīng)用一個自定義的特殊字體，下面的是我們目前針對h1的聲明，沒改動版的：
h1 {
color: #e33a89;
font: 27px/27px Baskerville, Palatino, "Palatino Linotype",
"Book Antiqua", Georgia, serif;
margin: 0;
text-shadow: #aaa 5px 5px 5px;
}
這些聲明在我們的基礎(chǔ)網(wǎng)頁里工作良好，27像素的文字大小也很適合我們?yōu)閔1設(shè)置的那些字體的展示。但對于我要用的名叫“Beautiful”的字體來說，27像素就太小了。下面我們要添加其他的規(guī)則來使用這個自定義字體：
@font-face {
src: url(Beautiful-ES.ttf);
font-family: "Beautiful";
}
.fontface h1 {
font: 42px/50px Beautiful;
text-shadow: none;
}
首先，我們添加“@font-face”聲明，并在其中為我們的自定義字體指定路徑、文件名和字體名。之后我們用一條CSS語句為我們的h1選擇字體樣式。你會看到，我這里選擇了一個很大的字號，那是因?yàn)椤癇eautiful”字體本身就比其他字體的文字要小很多，所以我們必須要指示瀏覽器在展示我們自定義字體的時候，給予h1一個很大的字號。
此外，我們漂亮的手寫體文字在文字陰影方面存在一些渲染問題，所以我們要在瀏覽器決定使用自定義文字時取消文字的陰影。另外，關(guān)于檢測特征部分的列表還需要被分為兩欄。為了達(dá)到目的，我要使用牛叉的CSS columns 屬性，這一屬性會使瀏覽器把列表智能分欄而不會打亂它的順序，而我們的列表，雖然沒有數(shù)字序號，卻也是按照字母順序排列的。當(dāng)然，不是所有的瀏覽器都支持這一屬性，對于那些不支持的瀏覽器，我們使用浮動來達(dá)到2欄的目的——使用了浮動后列表在視覺上不會再按照字母順序排列，但那也好過什么都沒有。
.csscolumns ol.features {
-moz-column-count: 2;
-webkit-columns: 2;
-o-columns: 2;
columns: 2;
}
.no-csscolumns ol.features {
float: left;
margin: 0 0 20px;
}
.no-csscolumns ol.features li {
float: left;
width: 180px;
}
我又一次使用了Modernizr來針對不同的情況設(shè)置不同的屬性。如果瀏覽器支持CSS columns，它就會把列表完美的分為2欄，如果不支持，通過Modernizr為<html>添加的“no-csscolumns”類我們也可以用浮動的方式使得列表變?yōu)閮蓹冢m然不那么完美，但也比直接來一個長串的單欄列表強(qiáng)。
這里您可能注意到了我為屬性添加了不同的前綴（-moz-、-webkit-、-o-），這是因?yàn)椴煌臑g覽器廠商對該功能的實(shí)現(xiàn)有不同的定義，所以要實(shí)現(xiàn)該功能需要針對不同的瀏覽器加上它們對應(yīng)的前綴。
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁 Modernizr——為HTML5和CSS3而生 [2] 下一頁 Modernizr——為HTML5和CSS3而生 [4]
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 3 頁 Modernizr——為HTML5和CSS3而生 [3]
