CSS3 文字和字型

2021-09-19 04:16:50 字數 1919 閱讀 8560

2.字型

語法:text-shadow:橫向偏移,垂直偏移,向外模糊度,顏色;

p

橫向,垂直正負值皆可用,模糊度值不能是負值。

相容:ie10+,firefox3.5+,chrome4+,safari4+,opera9.5+

語法:text-outline:輪廓寬度 模糊度 顏色;

相容:所有主流瀏覽器都不支援 text-outline 屬性。

p

意normal

瀏覽器預設

break-all

英文下強行拆詞換行(中衛和預設效果一樣)

keep-all

半形字元和連空格下換行(中文下,一行內最後乙個符號處換行)

相容:ie5.5+,firefox15+,chrome4+,safari3.1+,opera15+值意

normal

瀏覽器預設(有斷點換行)

break-word

斷開換行

相容:ie5.5+,firefox3.5+,chrome23+,safari6.1+,opera12.1+

中文無效!!值意

auto

自動left

左對齊right

右對齊center

居中justify

兩端對齊

start

文字左對齊,則左對齊。(意思和text-align一樣)

end文字左對齊,則右對齊。(意思和text-align相反)

initial

預設值inherit

繼承相容:ie相容,firefox需要加字首"moz",chrom50+

ie和firefox 需要給標籤設定text-align:justify;值意

clip

直接裁剪掉

ellipsis

後邊顯示…裁剪

string

自定義符號(只有火狐才能使用)

相容:ie6.0+,firefox7+,chrome4.0+,safari3.1+,opera11.1+(9.0-o-)

注:overflow:hidden,設定內容溢位隱藏才能用該屬性

自定義字型

語法:

@font-face

相容:ie9+,firefox3.5+,chrome4.0+,safari3.2+,opera10+

字型格式

truetype(.ttf):windows和max比較常見,是一種raw格式,不為**優化

相容:ie9+,firefox3.5+,chrome4.0+,safari3+,opera10+,ios mobile safari4.2+

opentype(.oft):被認為是一種原始的字型格式,內建在truetype的基礎上,所以也提供更多的功能

相容:ie不相容,firefox3.5+,chrome4.0+,safari3+,opera10+,ios mobile safari4.2+

web open font format (.woff):是web字型中最佳的格式。他是乙個開放的truetype/opentype的壓縮版本,同時支援元素資料報的分離。

相容:ie9+,firefox3.5+,chrome6.0+,safari3.6+,opera11+ 不相容ios手機

embedded open type(.eot):ie專用字型, 可以從truetype建立此格式

相容:僅ie4+

svg(.svg):svg字型是基於svg字型渲染的一種格式

相容:ie不相容,firefox不相容,chrome4.0+,safari3.1+,opera10+ ios mobile safari3.2+

簡便**

fontsquirrel

CSS3文字與字型

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

CSS3 文字與字型

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

CSS3 文字與字型

應用於陰影文字 語法text shadow h shadow 水平陰影 v shadow 垂直陰影 blur 陰影 color blur屬性值不能為負 text outline屬性,規定文字輪廓 語法 text outline thickness blur color 目前任何主流瀏覽器都不支援該屬...