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

本篇文章給大家帶來的內容是關於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；｝