简介更新历史关于样式表属性定位布局positionz-indextoprightbottomleftclipdisplayfloatclearvisibilityoverflowoverflow-xoverflow-y尺寸widthmin-widthmax-widthheightmin-heightmax-height外补白marginmargin-topmargin-rightmargin-bottommargin-left内补白paddingpadding-toppadding-rightpadding-bottompadding-left边框borderborder-widthborder-styleborder-colorborder-topborder-top-widthborder-top-styleborder-top-colorborder-rightborder-right-widthborder-right-styleborder-right-colorborder-bottomborder-bottom-widthborder-bottom-styleborder-bottom-styleborder-bottom-colorborder-leftborder-left-widthborder-left-styleborder-left-colorborder-radiusborder-top-left-radiusborder-top-right-radiusborder-bottom-right-radiusborder-bottom-left-radiusbox-shadowborder-imageborder-image-sourceborder-image-sliceborder-image-widthborder-image-outsetborder-image-repeat背景backgroundbackground-colorbackground-imagebackground-repeatbackground-attachmentbackground-positionbackground-originbackground-clipbackground-size颜色coloropacity字体fontfont-stylefont-variantfont-weightfont-sizefont-familyfont-stretchfont-size-adjust文本text-transformwhite-spacetab-sizeword-breakword-wrapoverflow-wraptext-aligntext-align-lasttext-justifyword-spacingletter-spacingtext-indentvertical-alignline-heighttext-size-adjust文本装饰text-decorationtext-decoration-linetext-decoration-colortext-decoration-styletext-decoration-skiptext-underline-positiontext-shadow书写模式directionunicode-bidiwriting-mode列表list-stylelist-style-imagelist-style-positionlist-style-type表格table-layoutborder-collapseborder-spacingcaption-sideempty-cells内容contentcounter-incrementcounter-resetquotes用户界面appearancetext-overflowoutlineoutline-widthoutline-coloroutline-styleoutline-offsetnav-indexnav-upnav-rightnav-downnav-leftcursorzoombox-sizingresizeime-modeuser-selectpointer-events多列columnscolumn-widthcolumn-countcolumn-gapcolumn-rulecolumn-rule-widthcolumn-rule-stylecolumn-rule-colorcolumn-spancolumn-fillcolumn-break-beforecolumn-break-aftercolumn-break-inside伸缩盒（旧）box-orientbox-packbox-alignbox-flexbox-flex-groupbox-ordinal-groupbox-directionbox-lines伸缩盒(新)flexflex-growflex-shrinkflex-basisflex-flowflex-directionflex-wrapalign-contentalign-itemsalign-selfjustify-contentorder变换transformtransform-origintransform-styleperspectiveperspective-originbackface-visibility过渡transitiontransition-propertytransition-durationtransition-timing-functiontransition-delay动画animationanimation-nameanimation-durationanimation-timing-functionanimation-delayanimation-iteration-countanimation-directionanimation-play-stateanimation-fill-mode打印pagepage-break-beforepage-break-afterpage-break-inside媒体查询widthheightdevice-widthdevice-heightorientationaspect-ratiodevice-aspect-ratiocolorcolor-indexmonochromeresolutionscangridOnly IEscrollbar-3dlight-colorscrollbar-darkshadow-colorscrollbar-highlight-colorscrollbar-shadow-colorscrollbar-arrow-colorscrollbar-face-colorscrollbar-track-colorscrollbar-base-colorfilterbehaviorOnly webkit-webkit-text-fill-color-webkit-text-stroke-webkit-text-stroke-width-webkit-text-stroke-color-webkit-box-reflect-webkit-tap-highlight-color-webkit-user-drag-webkit-overflow-scrolling选择符元素选择符通配选择符(*)类型选择符(E)ID选择符(E#id)类选择符(E.class)关系选择符包含选择符(E F)子选择符(E>F)相邻选择符(E+F)兄弟选择符(E~F)属性选择符E[att]E[att="val"]E[att~="val"]E[att^="val"]E[att$="val"]E[att*="val"]E[att|="val"]伪类选择符E:linkE:visitedE:hoverE:activeE:focusE:lang(fr)E:not(s)E:rootE:first-childE:last-childE:only-childE:nth-child(n)E:nth-last-child(n)E:first-of-typeE:last-of-typeE:only-of-typeE:nth-of-type(n)E:nth-last-of-type(n)E:emptyE:checkedE:enabledE:disabledE:target@page:first@page:left@page:right伪对象选择符E:first-letter/E::first-letterE:first-line/E::first-lineE:before/E::beforeE:after/E::afterE::placeholderE::selection语法与规则!important/*comment*/@import@charset@media@font-face@page@keyframes@supports取值与单位长度<length>emexchremvwvhvmaxvmincmmmqinptpcpx角度<angle>deggradradturn时间<time>sms频率<frequency>HzkHz布局<fraction><grid>frgr分辨率<resolution>dpidpcmdppx颜色<color>Color NameHEXRGBRGBAHSLHSLAtransparentcurrentColor文本inheritinitialunset<string><url><identifier>函数calc()toggle()生成内容counter()counters()attr()图像<image>image()image-set()<gradient>linear-gradient()radial-gradient()repeating-linear-gradient()repeating-radial-gradient()数字<number><integer><percentage>附录颜色关键字媒体类型CSS Hack条件Hack属性级Hack选择符级Hack问题和经验Bugs和解决方案技巧和经验其它经验
©
本文档使用
php.cn手册 发布
文字
语法：
@font-face { font-family: <identifier>; src: <fontsrc> [, <fontsrc>]*;<font>; }
<fontsrc> = <url> [format(<string>)]
取值：
<identifier>：字体名称
<url>：此值指的是你自定义的字体的存放路径，可以是相对路径也可以是绝路径
<string>：此值指的是你自定义的字体的格式，主要用来帮助浏览器识别，其值主要有以下几种类型：truetype, opentype, embedded-opentype, svg等
<font>：定义字体相关样式
说明：
设置嵌入HTML文档的字体。
需要兼容当前的主流浏览器，需同时使用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种格式的字体
兼容性（同时支持.woff,.ttf,.otf,.svg格式的版本将被视为完全实现该属性）：
| 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>
运行实例 »
点击 "运行实例" 按钮查看在线实例