css3詳解3課件chapter7字體

CSS3字體今日主打CSS3@font-face的語(yǔ)法規(guī)則CSS3@font-face的取值說(shuō)明CSS3@font-face的字體格式CSS3@font-face字體的應(yīng)用CSS3獲取特殊字體CSS3@font-face的語(yǔ)法規(guī)則@font-face{font-family:<YourWebFontName>;src:<source>[<format>][,<source>[<format>]]*;[font-weight:<weight>];[font-style:<style>];}兼容性IE9+、FireFox3.5+、Chrome4+、Safari3.2+、Opera10+YourWebFontName自定義的字體名稱(chēng)，他將被引用到Web元素中的font-familysource自定義的字體的存放路徑，可以是相對(duì)路徑也可以是絕路徑format自定義字體的格式，主要用來(lái)幫助瀏覽器識(shí)別weight和styleweight定義字體是否為粗體，style主要定義字體樣式，如斜體CSS3@font-face的取值說(shuō)明CSS3@font-face的字體格式TureTpe(.ttf)格式：.ttf字體是Windows和Mac的最常見(jiàn)的字體，是一種RAW格式，因此他不為網(wǎng)站優(yōu)化兼容性IE9+、FireFox3.5+、Chrome4+、Safari3+、Opera10+、IOSMobileSafari4.2+CSS3@font-face的字體格式OpenType(.otf)格式：.otf字體被認(rèn)為是一種原始的字體格式，其內(nèi)置在TureType的基礎(chǔ)上，所以也提供了更多的功能兼容性FireFox3.5+、Chrome4+、Safari3.1+、Opera10+、IOSMobileSafari4.2+CSS3@font-face的字體格式WebOpenFontFormat(.woff)格式：.woff字體是Web字體中最佳格式，他是一個(gè)開(kāi)放的TrueType/OpenType的壓縮版本，同時(shí)也支持元數(shù)據(jù)包的分離兼容性IE9+、FireFox3.5+、Chrome6+、Safari3.6+、Opera11.1+CSS3@font-face的字體格式EmbeddedOpenType(.eot)格式：.eot字體是IE專(zhuān)用字體，可以從TrueType創(chuàng)建此格式字體兼容性IE4+CSS3@font-face的字體格式SVG(.svg)格式：.svg字體是基于SVG字體渲染的一種格式兼容性Chrome4+、Safari3.1+、Opera10+、IOSMobileSafari3.2+CSS3@font-face字體的應(yīng)用推薦通用模版@font-face{ font-family:'YourWebFontName'; src:url('YourWebFontName.eot');/*IE9CompatModes*/ src:url('YourWebFontName.eot?#iefix')format('embedded-opentype'),/*IE6-IE8*/url('YourWebFontName.woff')format('woff'),/*ModernBrowsers*/url('YourWebFontName.ttf')format('truetype'),/*Safari,Android,iOS*/url('YourWebFontName.svg#YourWebFontName')format('svg');/*LegacyiOS*/}CSS3@font-face字體的應(yīng)用@font-face字體應(yīng)用Element{font-family:'YourWebFon