首頁 >web前端 >css教學 >css3中文字與字體相關的屬性介紹

css3中文字與字體相關的屬性介紹

不言原創: 2018-08-24 10:37:071592瀏覽

這篇文章帶給大家的內容是關於css3中文字與字體相關的屬性介紹，有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

1 text-shadow屬性

（1）功能

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

（2）使用方法

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

注意：

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

陰影的模糊半徑：代表陰影向外模糊時的模糊範圍。這個半徑值越大，則陰影向外模糊的範圍就越大。可選參數，省略時，預設為0，代表陰影不向外模糊。

陰影的顏色：可選參數，不指定時在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（使用瀏覽器預設換行規則）、keep-all（只能在半角空格或連字符處換行）、break-all（允許在單字內換行）

（3）瀏覽器支援

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

3 word-wrap屬性

（1）功能：讓長字和URL位址自動換行。

（2）值：normal（瀏覽器預設處理）、break-word（在長字或URL位址內部進行換行）

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

4 Web Font與@font-face屬性

#（1）功能：在網頁上顯示伺服器端字體。

（2）使用方法：

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

5 font-size-adjust屬性

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

（2）使用方法：

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

計算方法：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字體尺寸單位根據頁面上的根元素（一般指html元素）的字體大小而計算出實際的字體大小，不管元素的父元素的字體大小是多少。

html｛font-size：62.5%｝（大多数浏览器中，默认字体大小为16个像素，使用62.5%， 使浏览器自动计算出10个像素）
small｛font-size：1.1rem；｝
strong｛font-size：1.8rem；｝

（2）瀏覽器支援:

#到目前為止：包括IE9在內，所有瀏覽器都支援。

（3）相容於IE8及先前版本（不能使用rem字體單位）

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