這篇文章將為大家詳細(xì)講解有關(guān)css3中有哪些文字與字體相關(guān)的屬性，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對相關(guān)知識有一定的了解。

創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),川匯企業(yè)網(wǎng)站建設(shè),川匯品牌網(wǎng)站建設(shè),網(wǎng)站定制,川匯網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,川匯網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競爭力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。1 text-shadow屬性

（1）功能

給頁面上的文字添加陰影效果。

（2）使用方法

text-shadow：length length length color （陰影離開文字的橫方向距離、縱方向距離、陰影的模糊半徑、陰影的顏色）

注意：

陰影離開文字的橫方向距離、縱方向距離：必須指定，可指定負(fù)值。

陰影的模糊半徑：代表陰影向外模糊時(shí)的模糊范圍。這個(gè)半徑值越大，則陰影向外模糊的范圍也就越大?？蛇x參數(shù)，省略時(shí)，默認(rèn)為0，代表陰影不向外模糊。

陰影的顏色：可選參數(shù)，不指定時(shí)在CSS2中使用color屬性的顏色（實(shí)際Firefox和Opera，其他不支持省略，省則不繪制），CSS3中使用瀏覽器指定的默認(rèn)色。

（4）指定多個(gè)陰影

text-shadow：10px 10px #f39800,
                         40px 35px #fff100,
                        70px  60px #c0ff00；

只有Chrome 、Firefox、Opera瀏覽器支持該功能。

（3）瀏覽器支持

到目前為止：Safari、Chrome 、Firefox、Opera瀏覽器支持該屬性。

text-shadow：5px 5px 5px gray;（灰色陰影，陰影離開分子的橫縱方向均為5個(gè)像素）

2 word-break屬性

（1）功能：讓文本自動(dòng)換行

（2）值：normal（使用瀏覽器默認(rèn)換行規(guī)則）、keep-all（只能在半角空格或連字符處換行）、break-all（允許在單詞內(nèi)換行）

（3）瀏覽器支持

到目前為止：Safari、Chrome 、IE瀏覽器支持該屬性。

3 word-wrap屬性

（1）功能：讓長單詞和URL地址自動(dòng)換行。

（2）值：normal（瀏覽器默認(rèn)處理）、break-word（在長單詞或URL地址內(nèi)部進(jìn)行換行）

（3）瀏覽器支持：所有瀏覽器。

4 Web Font與@font-face屬性

（1）功能：在網(wǎng)頁上顯示服務(wù)器端字體。

（2）使用方法：

@font-face{
    font-famliy：WebFont；
    src：url（‘font/Fontin_Sans_R_45b.otf’）  format（“opentype”）；
   font-weitht：normal；
}
h2{
    font-family：WebFont；
}

5 font-size-adjust屬性

（1）功能：修改字體種類而保持字體尺寸不變

（2）使用方法：

aspect值（比例值）：可以用來在將字體修改為其他字體時(shí)保持字體大小基本不變。（常數(shù)）

計(jì)算方法：x-height值（使用該字體書寫出來的小寫X的高度（像素為單位））除以該字體的尺寸。

p{
   font-size：16px；
   font-famliy：Times New Roman；
   font-size-adjust：0.46（aspect值）
}

（3）瀏覽器對于aspect值的計(jì)算方法：

在font-size-adjust屬性中指定aspect值并且將字體修改為其他字體后，瀏覽器對于修改后字體尺寸的計(jì)算公式：

c = （a / b）s

a：表示實(shí)際使用的字體的aspect值、b：表示修改前字體的aspect值、

s：表示指定的字體尺寸，c：瀏覽器實(shí)際顯示時(shí)的字體尺寸。

（4）屬性值可設(shè)為：”none“

等同于不對font-size-adjust屬性進(jìn)行設(shè)置，按照字體原來的大小顯示。

6 使用rem單位定義字體大小

（1）rem字體尺寸單位根據(jù)頁面上的根元素（一般指html元素）的字體大小而計(jì)算出實(shí)際的字體大小，不管元素的父元素的字體大小是多少。

html｛font-size：62.5%｝（大多數(shù)瀏覽器中，默認(rèn)字體大小為16個(gè)像素，使用62.5%， 使瀏覽器自動(dòng)計(jì)算出10個(gè)像素）
small｛font-size：1.1rem；｝
strong｛font-size：1.8rem；｝

（2）瀏覽器支持:

到目前為止：包括IE9在內(nèi)，所有瀏覽器都支持。

（3）兼容IE8及之前版本（不能使用rem字體單位）

html｛font-size：62.5%｝
small｛font-size：11px；font-size：1.1rem；｝
strong｛font-size：18px；font-size：1.8rem；｝

關(guān)于css3中有哪些文字與字體相關(guān)的屬性就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

分享名稱：css3中有哪些文字與字體相關(guān)的屬性-創(chuàng)新互聯(lián)
本文網(wǎng)址：http://jinyejixie.com/article44/dcjeee.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供商城網(wǎng)站、網(wǎng)站內(nèi)鏈、企業(yè)網(wǎng)站制作、網(wǎng)站營銷、關(guān)鍵詞優(yōu)化、服務(wù)器托管

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)