css3中有哪些文字與字體相關的屬性-創(chuàng)新互聯(lián)

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

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

(1)功能

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

(2)使用方法

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

注意:

陰影離開文字的橫方向距離、縱方向距離:必須指定,可指定負值。

陰影的模糊半徑:代表陰影向外模糊時的模糊范圍。這個半徑值越大,則陰影向外模糊的范圍也就越大??蛇x參數(shù),省略時,默認為0,代表陰影不向外模糊。

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

(4)指定多個陰影

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個像素)

2 word-break屬性

(1)功能:讓文本自動換行

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

(3)瀏覽器支持

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

3 word-wrap屬性

(1)功能:讓長單詞和URL地址自動換行。

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

(3)瀏覽器支持:所有瀏覽器。

4 Web Font與@font-face屬性

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

(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ù))

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

p{
   font-size:16px;
   font-famliy:Times New Roman;
   font-size-adjust:0.46(aspect值)
}

(3)瀏覽器對于aspect值的計算方法:

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

c = (a / b)s

a:表示實際使用的字體的aspect值、b:表示修改前字體的aspect值、

s:表示指定的字體尺寸,c:瀏覽器實際顯示時的字體尺寸。

(4)屬性值可設為:”none“

等同于不對font-size-adjust屬性進行設置,按照字體原來的大小顯示。

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

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

html{font-size:62.5%}(大多數(shù)瀏覽器中,默認字體大小為16個像素,使用62.5%, 使瀏覽器自動計算出10個像素)
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;}

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

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

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

廣告

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

小程序開發(fā)