©
This document uses PHP Chinese website manual Release
@font-face { font-family: <identifier>; src: <fontsrc> [, <fontsrc>]*;<font>; }
<fontsrc> = <url> [format(<string>)]
<identifier>:字体名称
<url>:此值指的是你自定义的字体的存放路径,可以是相对路径也可以是绝路径
<string>:此值指的是你自定义的字体的格式,主要用来帮助浏览器识别,其值主要有以下几种类型:truetype, opentype, embedded-opentype, svg等
<font>:定义字体相关样式
需要兼容当前的主流浏览器,需同时使用TureTpe(.ttf)、Web Open Font Format(.woff)、Embedded Open Type(.eot)、SVG(.svg)四种字体格式。
嵌入HTML文档的字体是指将OpenType字体(压缩的TrueType字体)文件映射到客户端系统,用来提供HTML文档使用该字体,或取代客户端系统已有的同名字体。即让客户端显示客户端所没有安装的字体。
.eot(Embedded Open Type)为IE的私有字体格式。Safari3.1开始支持.ttf(TrueType)和.otf(OpenType)。
未来.woff(Web Open Font Format)将会取代.ttf(TrueType)和.otf(OpenType)两种字体格式。
示例:使用一个全浏览器兼容的自定义字体
代码如下:
@font-face {
font-family: 'diyfont';
src: url('diyfont.eot'); /* IE9+ */
src: url('diyfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('diyfont.woff') format('woff'), /* chrome、firefox */
url('diyfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url('diyfont.svg#fontname') format('svg'); /* iOS 4.1- */
}
你需要同时提供4种格式的字体
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome |
---|---|---|---|---|---|---|---|---|
Basic Support | 6.0+ | 2.0+ | 4.0+ | 3.1+ | 15.0+ | 3.2+ | 2.1+ | 18.0+ |
eot | 6.0+ | 2.0-38.0 | 4.0-43.0 | 3.1-8.1 | 5.0-28.0 | 3.2-8.1 | 2.1-4.4.4 | 18.0-40.0 |
ttf/otf | 6.0-8.0 | 2.0-3.0 | 4.0+ | 3.1+ | 15.0+ | 3.2-4.1 | 2.1 | 18.0+ |
9.0+ | 3.5+ | 4.3+ | 2.2+ | |||||
woff | 6.0-8.0 | 2.0-3.5 | 4.0 | 3.1-5.0 | 15.0+ | 3.2-4.3 | 2.1-4.3 | 18.0+ |
9.0+ | 3.6+ | 5.0+ | 5.1+ | 5.0+ | 4.4+ | |||
svg | 6.0-11.0 | 2.0-38.0 | 4.0-37.0 | 3.1 | 15.0-24.0 | 3.2+ | 2.1-2.3 | 18.0-37.0 |
38.0-43.0 #1 | 3.2+ | 25.0-28.0 #1 | 3.0+ | 38.0-43.0 #1 |
策略修改为只支持windows vista/xp上的svg fonts
<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="utf-8" /> <title>@font-face_CSS参考手册_web前端开发参考手册系列</title> <meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" /> <style> @font-face { font-family: 'iconfont'; src: url('http://at.alicdn.com/t/font_1397098551_95441.eot'); src: url('http://at.alicdn.com/t/font_1397098551_95441.eot?#iefix') format('embedded-opentype'), url('http://at.alicdn.com/t/font_1397098552_0142624.woff') format('woff'), url('http://at.alicdn.com/t/font_1397098551_8732882.ttf') format('truetype'), url('http://at.alicdn.com/t/font_1397098552_0586202.svg#iconfont') format('svg'); } body { font-family: 'iconfont'; font-style: normal; font-size: 32px; line-height: 2; letter-spacing: .25em; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; -moz-osx-font-smoothing: grayscale; } </style> </head> <body> 㐳 㐴 㐵 㐶 㐷 㐸 㐹 㐺 㐻 㐼 㐽 㐾 㐿 㑀 㑁 㑂 㑃 㑄 㑅 㑆 㑇 㑈 㑉 㑊 㑋 㑌 㑍 㑎 㑏 㑐 㑑 㑒 㑓 㑔 㑕 㑖 㑗 㑘 㑙 㑚 㑛 㑜 㐲 㐷 㐸 㐹 㐺 㐻 㐼 㐽 㐾 㐿 㑀 㑁 㑂 㑋 㑌 㑍 㑎 㑏 㑐 㑑 㑒 㑓 㑔 㑕 㑖 㑗 㑘 㑙 㑚 㑛 㑜 㑝 㑞 㑟 㑠 㑡 㑢 㑣 㑤 㑥 㑦 㑧 㓾 㓿 㔀 㔁 㔂 㔃 </body> </html>
点击 "运行实例" 按钮查看在线实例