CSS3 文字與字型相關樣式

2022-03-09 09:38:24 字數 889 閱讀 5019

給文字新增陰影-text-shadow屬性

text-shadow:length length length color
前三個length分別指陰影離開文字橫向距離、縱向距離（這兩個引數允許值為負）和模糊半徑（值越大模糊範圍越大，預設為0，不模糊），color指定陰影的顏色

div
讓文字換行

很多瀏覽器本身自帶換行功能，在css3中可以使用word-break來決定換行的處理方式

div
值

換行規則

normal

使用瀏覽器的預設換行規則

keep-all

只能在半形空格或連字元處換行

break-all

允許在單詞內換行

使用word-wrap屬性來實現長單詞與url位址的自動換行

word-wrap:break-word/normal;


//normal為預設處理
使用伺服器端字型

在css3中，使用@font-face來利用伺服器端的預設字型。

@font-face
src指定伺服器端字型的字型檔案所在路徑

先引用客戶端上的字型，沒有再引用伺服器端上的字型

@font-face
font-size-adjust屬性

aspect的計算方法：x-height:58 font-size:100px aspect:0.58

text sample


text sample


text sample

CSS3文字與字型相關樣式

1 功能 給頁面上的文字新增陰影效果。2 使用方法 text shadow length length length color 陰影離開文字的橫方向距離 縱方向距離 陰影的模糊半徑 陰影的顏色 注意 陰影離開文字的橫方向距離 縱方向距離 必須指定，可指定負值。陰影的模糊半徑 代表陰影向外模糊時的模...

CSS3文字與字型

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

CSS3 文字與字型

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