CSS3文本與字體

1、CSS3 換行

一、word-break（規定自動換行的處理方法）

word-break: normal / break-all / keep-all;

/*
normal：使用瀏覽器默認的換行規則
break-all：容許在單詞內換行
keep-all：只能在半角空格或連字符處換行
*/
複製代碼

兼容性：IE5.5+、FireFox15+、Chrome4+、Safari3.1+、Opera15+

二、word-wrap（容許長單詞或 URL 地址換行到下一行）

word-wrap: normal / break-word;

/*
normal：只在容許的斷字點換行（瀏覽器保持默認處理）
break-word：在長單詞或 URL 地址內部進行換行
*/
複製代碼

兼容性：IE5.5+、FireFox3.5+、Chrome23+、Safari6.1+、Opera12.1+

2、CSS3 新文本屬性

一、text-align-last（規定如何對齊文本的最後一行）

text-align-last: auto / left / right / center / justify / start / end / initial / inherit;

/*
auto：無特殊對齊方式
justify：內容兩端對齊
start：內容對齊開始邊界
end：內容對齊結束邊界
*/
複製代碼

兼容性：text-align-last 屬性只有IE支持，在Firefox中須要加上其前綴「-moz」, Chrom50.0.2661.102以上

注意（text-align-last 只有在 text-align 屬性設置爲 "justify" 時才起做用）

二、overflow（溢出文本的顯示 / 隱藏）

overflowt: visible / hidden;
複製代碼

三、text-overflow（規定當文本溢出包含元素時發生的事情）

text-overflow: clip / ellipsis / string;

/*
clip：修剪文本
ellipsis：顯示省略符號「…」來表明被修剪的文本
string：使用給定的字符串來表明被修剪的文本
*/
複製代碼

兼容性：IE6.0+、FireFox7.0+、Chrome4.0+、Safari3.1+、Opera11.1+（9.0 -o-）

四、text-shadow（文本陰影）

text-shadow: h-shadow v-shadow blur color;
複製代碼

兼容性：IE10+、FireFox3.5+、Chrome4+、Safari4+、Opera9.5+

3、CSS3 字體

一、CSS3 @font-face的語法規則

font-family: <YourWebFontName>;
src: <source> [<format>][,<source> [<format>]]*;
     [font-weight: <weight>];
     [font-style: <style>];}

/*
YourWebFontName：自定義的字體名稱，將被引用到Web元素中的font-family
source：自定義的字體的存放路徑，能夠是相對路徑也能夠是絕路徑
format：自定義字體的格式，主要用來幫助瀏覽器識別
weight：定義字體是否爲粗體
style：定義字體樣式，如斜體
*/
複製代碼

兼容性：IE9+、FireFox3.5+、Chrome4+、Safari3.2+、Opera10+

二、CSS3 @font-face的字體格式

TureTpe (.ttf)（Windows和Mac的最多見的字體，是一種RAW格式，所以不爲網站優化）

兼容性：IE9+、FireFox3.5+、Chrome4+、Safari3+、Opera10+、IOS Mobile Safari4.2+

OpenType (.otf)（被認爲是一種原始的字體格式，內置在TureType的基礎上，因此也提供了更多的功能）

兼容性：FireFox3.5+、Chrome4+、Safari3.1+、Opera10+、IOS Mobile Safari4.2+

Web Open Font Format (.woff)（Web字體中最佳格式，是開放的TrueType/OpenType的壓縮版本，同時也支持元數據包的分離）

兼容性：IE9+、FireFox3.5+、Chrome6+、Safari3.6+、Opera11.1+

Embedded Open Type (.eot)（IE專用字體，能夠從TrueType建立此格式字體）

兼容性：IE4+

SVG (.svg)（基於SVG字體渲染的一種格式）

兼容性：Chrome4+、Safari3.1+、Opera10+、IOS Mobile Safari3.2+

三、CSS3 @font-face字體的應用

通用模版

@font-face {
font-family: 'YourWebFontName';
src: url('YourWebFontName.eot'); /* IE9 Compat Modes */
src: url('YourWebFontName.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
     url('YourWebFontName.woff') format('woff'), /* 全部主流瀏覽器 */
     url('YourWebFontName.ttf') format('truetype'), /* Safari, Android, iOS */
     url('YourWebFontName.svg#YourWebFontName') format('svg'); /* Legacy iOS */
}
複製代碼

字體文件+CSS模板一鍵生成網站：www.fontsquirrel.com/tools/webfo…