一、CSS3 換行

?

1、word-break（規(guī)定自動(dòng)換行的處理方法）

word-break: normal / break-all / keep-all;/* normal：使用瀏覽器默認(rèn)的換行規(guī)則 break-all：允許在單詞內(nèi)換行 keep-all：只能在半角空格或連字符處換行 */

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

?

2、word-wrap（允許長(zhǎng)單詞或 URL 地址換行到下一行）

word-wrap: normal / break-word;/* normal：只在允許的斷字點(diǎn)換行（瀏覽器保持默認(rèn)處理） break-word：在長(zhǎng)單詞或 URL 地址內(nèi)部進(jìn)行換行 */

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

?

二、CSS3 新文本屬性

?

1、text-align-last（規(guī)定如何對(duì)齊文本的最后一行）

text-align-last: auto / left / right / center / justify / start / end / initial / inherit;/* auto：無特殊對(duì)齊方式 justify：內(nèi)容兩端對(duì)齊 start：內(nèi)容對(duì)齊開始邊界 end：內(nèi)容對(duì)齊結(jié)束邊界 */

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

注意（text-align-last 只有在 text-align 屬性設(shè)置為 "justify" 時(shí)才起作用）

?

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

overflowt: visible / hidden; ?

3、text-overflow（規(guī)定當(dāng)文本溢出包含元素時(shí)發(fā)生的事情）

text-overflow: clip / ellipsis / string;/* clip：修剪文本 ellipsis：顯示省略符號(hào)“…”來代表被修剪的文本 string：使用給定的字符串來代表被修剪的文本 */

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

?

4、text-shadow（文本陰影）

text-shadow: h-shadow v-shadow blur color;

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

?

三、CSS3 字體

?

1、CSS3 @font-face的語法規(guī)則

font-family: <YourWebFontName>; src: <source> [<format>][,<source> [<format>]]*;[font-weight: <weight>];[font-style: <style>];}/* YourWebFontName：自定義的字體名稱，將被引用到Web元素中的font-family source：自定義的字體的存放路徑，可以是相對(duì)路徑也可以是絕路徑 format：自定義字體的格式，主要用來幫助瀏覽器識(shí)別 weight：定義字體是否為粗體 style：定義字體樣式，如斜體 */

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

?

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

?

TureTpe (.ttf)（Windows和Mac的最常見的字體，是一種RAW格式，因此不為網(wǎng)站優(yōu)化）

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

OpenType (.otf)（被認(rèn)為是一種原始的字體格式，內(nèi)置在TureType的基礎(chǔ)上，所以也提供了更多的功能）

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

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

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

Embedded Open Type (.eot)（IE專用字體，可以從TrueType創(chuàng)建此格式字體）

兼容性：IE4+

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

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

?

3、CSS3 @font-face字體的應(yīng)用

通用模版

@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模板一鍵生成網(wǎng)站：https://www.fontsquirrel.com/tools/webfont-generator

轉(zhuǎn)載于:https://www.cnblogs.com/Leophen/p/11126337.html

總結(jié)

以上是生活随笔為你收集整理的CSS3文本与字体的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。