标签：des android style blog http io color ar os
今天总结一下font-face这个属性，font-face他可以将字体嵌入到web页面中。也就是说即使用户电脑中没有你定义的特殊字体也不用担心样式会显示不出来。font-face属性他自身有着很好的兼容性，兼容全部浏览器~看到这里是不是觉得font-face没有兼容问题了呢？非也非也，咱们还是从头看看吧。
@font-face { |
font-family: <YourWebFontName>; |
src: <source> [<format>][,<source> [<format>]]*; |
[font-weight: <weight>]; |
[font-style: <style>]; |
} |
@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‘), /* Modern Browsers */
url(‘YourWebFontName.ttf‘) format(‘truetype‘), /* Safari, Android, iOS */
url(‘YourWebFontName.svg#YourWebFontName‘) format(‘svg‘); /* Legacy iOS */
}
ok，只要这样写兼容就没啥问题了~
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>@font-face demo1</title> <style> *{margin:0;padding:0;} @font-face { font-family:‘chen‘; src: url(‘font/caricature/caricature-webfont.eot‘); src: url(‘font/caricature/caricature-webfont.eot?#iefix‘) format(‘embedded-opentype‘), url(‘font/caricature/caricature-webfont.woff‘) format(‘woff‘), url(‘font/caricature/caricature.ttf‘) format(‘truetype‘), url(‘font/caricature/caricature-webfont.svg#caricature-webfont‘) format(‘svg‘); } .chen{font-family:‘chen‘;font-size:100px;} </style> </head> <body> <p class="chen">chen</p> </body> </html>
|
format 格式 |
Font 格式 |
后缀名 |
|
truetype |
TrueType |
.ttf |
|
opentype |
OpenType |
.ttf, .oft |
|
truetype-aat |
TrueType with Apple Advanced Typography extensions |
.ttf |
|
embedded-opentype |
Embedded OpenType |
.eot |
|
svg |
SVG Font |
.svg, .svgz |
|
浏览器 |
支持类型 |
|
IE6,7,8 |
仅支持 Embedded OpenType(.eot) 格式。 |
|
Firefox 3.5 |
支持 TrueType、OpenType(.ttf, .otf) 格式。 |
|
Firefox 3.6 |
支持 TrueType、OpenType(.ttf, .otf) 及 WOFF 格式。 |
|
Chrome,Safari,Opera |
支持 TrueType、OpenType(.ttf, .otf) 及 SVG Font(.svg) 格式。 |
标签：des android style blog http io color ar os
原文地址：http://www.cnblogs.com/bjchenxn/p/4092893.html
