1. 給文字添加陰影---text-shadow
text-shadow: 5px 5px 0 red;
值從左至右分別代表:陰影離開文字橫向距離市袖、縱向距離、模糊半徑算柳、陰影顏色
第4個值外厂,在FireFox和Opera中可省略劝赔,會使用color屬性的顏色龙亲。在Safari和Chrome中不能省略,否則無法繪制陰影恳不。
2. 讓文本自動換行---word-break
瀏覽器默認換行規(guī)則換行符合人們的自然寫作方式檩小。CSS3中可以使用word-break來自行決定換行的處理方式。這個屬性是從IE中發(fā)展過來的烟勋。
使用瀏覽器默認換行規(guī)則:
word-break: normal;
連續(xù)中文之間不允許換行(IE支持规求,Safari與Chrome不支持):
word-break: keep-all;
允許在單詞內(nèi)換行(可能會導致標點符號位于行首):
word-break: break-all;
3. 單詞與URL地址自動換行
word-wrap: break-word;
4. 使用服務(wù)端字體---Web Font與@font-face
在CSS3中,新增了Web Fonts功能卵惦,網(wǎng)頁可以使用服務(wù)端字體阻肿,只要某個字體在服務(wù)端已安裝,網(wǎng)頁中就能夠正常顯示沮尿。
使用@font-face利用服務(wù)端字體:
/**
* 聲明使用服務(wù)端字體丛塌,并指定服務(wù)端字體位置和類型
*/
@font-face{
font-family: WebFont; //使用WebFont聲明使用服務(wù)端字體
src: url('font/Fontin_Sans_R_45b.otf') format("opentype");
font-weight: normal;
}
/**
* 應(yīng)用服務(wù)端字體樣式
*/
hi{
font-family: WebFont; // 字體應(yīng)用到元素上
}
在src屬性值指定服務(wù)端字體文件所在路徑,在format屬性值中聲明字體文件的格式(可省略字體文件格式)畜疾。以上代碼使用了exljbris字體公司免費提供的Fontin Sans字體赴邻,字體文件格式為OpenType。
目前為止啡捶,可以使用的文件格式為OpenType和TrueType姥敛,format值分別為opentype和truetype,文件擴展名分別為“.otf”和“.ttf”瞎暑。另外彤敛,IE中,只能使用微軟自帶的Embedded的OpenType字體文件了赌,文件擴展名為“.eot”墨榄,同時不需要使用format屬性值。
使用服務(wù)端字體時勿她,可以根據(jù)斜體還是粗體袄秩,使用不同的字體文件:
/**
* 聲明使用服務(wù)端字體,并指定服務(wù)端字體位置和類型
*/
@font-face{
font-family: WebFont;
src: url('Fontin_Sans_R_45b.otf') format("opentype");
}
@font-face{
font-family: WebFont;
font-style: italic;
src: url('Fontin_Sans_I_45b.otf') format("opentype");
}
@font-face{
font-family: WebFont;
font-weight: bold;
src: url('Fontin_Sans_B_45b.otf') format("opentype");
}
@font-face{
font-family: WebFont;
font-style: italic;
font-weight: bold;
src: url('Fontin_Sans_BI_45b.otf') format("opentype");
}
/**
* 應(yīng)用服務(wù)端字體樣式
*/
div{
font-family: WebFont;
font-size: 14px;
}
div#div1{
font-style: normal;
font-weight: normal;
}
div#div2{
font-style: italic;
font-weight: normal;
}
div#div3{
font-style: normal;
font-weight: bold;
}
div#div4{
font-style: italic;
font-weight: bold;
}
5. 修改字體種類保持字體尺寸不變---font-size-adjust
使用每個字體種類自帶的aspect值:
div{
font-size: 16px;
font-family: Times New Roman;
font-size-adjust: 0.46;
}
aspect值可以用來在將字體修改為其他字體時保持字體大小不變嫂拴。
如果想將16px的Times New Roman字體修改為Comic Sans MS字體播揪,字體大小仍然保持16px的話,則需要執(zhí)行如下步驟:
查得Times New Roman字體的aspect值為0.46
查得Comic Sans MS字體的aspect值為0.54
將0.54除以0.46后得到近似值1.17
將16px除以1.17筒狠,得到大約14px,然后在樣式中指定字體尺寸為14px箱沦。
也就是說辩恼,14px的Comic Sans MS相當于16px的Times New Roman字體。使用rem字體單位
rem根據(jù)根元素的字體大小計算出實際的字體大小。過去我們使用em灶伊,em單位根據(jù)父元素字體大小來計算疆前,因此,當我們將一個元素從一個父元素移動到另一個父元素中時很可能使得元素的字體大小產(chǎn)生變化聘萨。
除了em單位外竹椒,我們也使用px單位指定字體大小。但是米辐,今天胸完,由于web網(wǎng)站和應(yīng)用程序可以被運行在各種移動設(shè)備中,如果只依靠像素來指定字體尺寸翘贮,則可能需要根據(jù)各種尺寸的屏幕來為元素指定各種尺寸的字體赊窥,這是件非常惱火的事。因此狸页,我們需要使用rem單位锨能。
除IE8外,瀏覽器均支持rem單位:
html{font-size: 10px;}
/* 兼容IE8 */
body{font-size: 14px; font-size: 1.4rem;}
12size{font-size: 12px; font-size: 1.2rem;}
16size{font-size: 16px; font-size: 1.6rem;}
IE8也可以通過引入rem.js文件來兼容rem