css3中文字與字體相關的屬性有哪些

這篇文章主要為大家展示了“css3中文字與字體相關的屬性有哪些”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“css3中文字與字體相關的屬性有哪些”這篇文章吧。

　　1text-shadow屬性

　　（1）功能

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

　　（2）使用方法

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

　　注意：

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

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

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

　　（4）指定多個陰影

　　text-shadow：10px10px#f39800,

　　40px35px#fff100,

　　70px60px#c0ff00；

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

　　（3）瀏覽器支持

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

　　text-shadow：5px5px5pxgray;（灰色陰影，陰影離開分子的橫縱方向均為5個像素）

　　2word-break屬性

　　（1）功能：讓文本自動換行

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

　　（3）瀏覽器支持

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

　　3word-wrap屬性

　　（1）功能：讓長單詞和URL地址自動換行。

　　（2）值：normal（瀏覽器默認處理）、break-word（在長單詞或URL地址內部進行換行）

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

　　4WebFont與@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；

　　}

　　5font-size-adjust屬性

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

　　（2）使用方法：

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

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

　　p{

　　font-size：16px；

　　font-famliy：TimesNewRoman；

　　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中文字與字體相關的屬性有哪些”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！