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；
}
h2{
    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；｝

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