首页 > 代码库 > @font-face
@font-face
今天总结一下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>]; |
} |
1.YourWebFontName:此值指的就是你自定义的字体名称，最好是使用你下载的默认字体，他将被引用到你的Web元素中的font-family。如“font-family:"YourWebFontName";”
2.source:此值指的是你自定义的字体的存放路径，可以是相对路径也可以是绝路径；
3.format:此值指的是你自定义的字体的格式，主要用来帮助浏览器识别，其值主要有以下几种类型:truetype,opentype,truetype-aat,embedded-opentype,avg等；
4.weight和style:这两个值大家一定很熟悉，weight定义字体是否为粗体，style主要定义字体样式，如斜体。
二.兼容
前面说过font-face自身没有兼容问题，他的兼容问题出在字体格式上。我们常用的字体格式有这5种，TureTpe(.ttf)格式，OpenType(.otf)格式，Web Open Font Format(.woff)格式，Embedded Open Type(.eot)格式，SVG(.svg)格式。
这里咱们直接介绍解决兼容的写法了~
@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，只要这样写兼容就没啥问题了~为了解决兼容问题能看到咱们用了4种字体格式，这也是个问题。平常在网上找字体能找到一种就不错了去哪找其他3种啊。不用担心，咱们接着向下看。
三.字体的生成
对于字体格式的问题咱们只要借助fontsquirrel这个网站就ok了。
http://www.fontsquirrel.com/tools/webfont-generator
使用方法如下：
第一步：添加想转换的字体。
第二步：设置参数下载
四.实例
<!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>
五.性能
对于font-face的性能问题，如果你做的是英文网站，或者英文的特殊字体比较多。那么利用font-face属性来实现效果是个不错的选择。如果字体效果是中文字体，那我劝你还是用图片好了。中文字体的体积比较大会对网站性能产生影响。
PS:
关于字体格式以及浏览器对字体的支持程度表：
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) 格式。 |
转自：http://wqf1992.blog.163.com/blog/static/23389807920148514353139/
@font-face
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。