CSS3文字與字型相關樣式

2021-08-25 08:34:26 字數 2205 閱讀 3168

（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個畫素）

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

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

（3）瀏覽器支援

到目前為止：safari、chrome 、ie瀏覽器支援該屬性。 

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

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

（2）使用方法：

@font-face{

font-famliy：webfont；

src：url（『font/fontin_sans_r_45b.otf』）  format（「opentype」）；

font-weitht：normal；

h1{font-family：webfont；

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

（2）使用方法：

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

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

div{

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屬性進行設定，按照字型原來的大小顯示。

（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 文字與字型相關樣式

給文字新增陰影 text shadow屬性text shadow length length length color前三個length分別指陰影離開文字橫向距離 縱向距離 這兩個引數允許值為負 和模糊半徑 值越大模糊範圍越大，預設為0，不模糊 color指定陰影的顏色 div讓文字換行 很多瀏覽器...

CSS3文字與字型

text overflow用來設定是否使用乙個省略標記 標示物件內文字的溢位。語法 但是text overflow只是用來說明文字溢位時用什麼方式顯示，要實現溢位時產生省略號的效果，還須定義強制文字在一行內顯示 white space nowrap 及溢位內容為隱藏 overflow hidden ...

CSS3 文字與字型

text overflow用來設定是否使用省略標記標示物件內溢位的文字 clip表示剪下，ellipsis表示省略號隱藏 要實現溢位時產生 省略號的效果，還須定義 強制文字在一行內顯示 white space nowrap 及 溢位內容為隱藏 overflow hidden 只有這樣才能實現 溢位文...