CSS3笔记
CSS3
1.一般情况下,使用class选择器，同时保证css文档使用选择器的时候路径不要太长，一般不超过3个。
2.当既想保留文本，又不想让文本显示出来，可以使用text-indent:-9999，让文本缩进到看不到的地方。
3.当设置元素为100%宽度的时候，浏览器会产生自适应效果：即放缩小浏览器后，拉动滚动条，页面会默认使用当前的分辨率，从而导致拉动滚动条的部分信息无法正常显示，这时候可以设置min-width属性，使得页面不能比设定的页面小，从而消除自适应。
4.当元素是图片和文字结合在一起时，一般使用figure标签元素，figure是块级元素。图片一般直接插入figure中，而文字放在其子元素figcaption中。
5.可以设置margin：0 auto;来达到子元素在父元素中水平居中的效果；而想要水平垂直居中，可以设置元素的height和line-height相等来达到垂直居中效果；垂直居中最常用的方法是绝对定位left:50%,top:50%,再用margin: -Xpx -Ypx。来调整，X和Y取决于需要定位标签的width和height值。
6. height和line-height详解：height即当前元素的高度，line-height则是子元素的行内高度，如果height等于line-height，那么表示整个当前元素的高度等于子元素的高度，即垂直居中，如果子元素的宽度超过当前元素的宽度，那么子元素将会溢出当前元素，并以当前元素的高度为行高跟随在后面显示。
7.当前面的元素设置浮动后，后面的元素会往上移动，导致，元素被遮盖，处理方法是，后面的元素清除浮动，即可使元素停留在原位，这时，元素再设置margin会无效，要移动可以使用定位，例如使用相对定位relative,即自己相对自己定位。
8.当设置文本框,选定后会出现外边框outline,如果不需要可以设为none;
9.margin值，border值，padding值对元素大小的影响：
（1）在元素宽高不固定的情况下，margin,border,padding值都会把当前元素撑大。
（2）在元素宽高固定的情况下，margin值不会撑大当前元素，如果margin大于元素可设值，当前元素内容将溢出；而border值和padding值，无论设置多少，都会撑大当前元素；即：当前元素宽度=原来元素宽度+新增加的border值+新增加的padding值。
10.当计算元素的高度比较麻烦时，可以使用box-sizing: border-box;方法；在元素宽度和高度不变的情况下，修改内边距padding值和边框boder值，元素高度保持不变（前提是paddding+border+内容不溢出当前元素）。
11.总结排序：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
同一级别
同一级别中后写的会覆盖先写的样式
流体
1.当浏览器窗口分辨率不固定时，大分辨率的PC端和小分辨率的移动端所需要的字体大小、图片等需要进行适当的缩小和放大，可用媒体查询来更改字体的大小，如果480px和640以内的是正常分辨率，当分辨率小于480px，而字体过大，字体应能够进行媒体查询，例如当分辨率在480px和640px之间时：
@media (min-width: 480px) and (max-width: 640px){}
括号内{}为要更改字体的标签和相应的属性，当窗口小于480px时：
@media (max-width: 480px){}
括号内{}为要更改字体大小的标签和响应的属性。
2.流体的概念：页面中标签元素的宽度值都是百分数，所以拉伸、缩小浏览器的大小，布局的宽度会随之变化儿不会出现横向滚动条，例如max-width: X px or X%, min-width:X px or X% , width:X% 。百分比都是相当于父级元素，或者浏览器的分辨率
3.流体中，正常情况下不允许换行，可以通过white-space:nowrap进行设置内容超过不换行（PC端测试，默认情况下：超出不换行，如果内容换行，那么默认也换行）。单单通过white-space设置可能会出现半截字，此时，可以通过overflow: hidden对字进行隐藏和text-overflow:ellipsis（需要和overflow配合使用）对隐藏的字显示为…进行设置。
4.要让标签元素一直停留在某个位置，不随窗口滚动而移动，可以使用position:fixed，再配合z-index使用即可，如果还不行，可以再加top:0;。
5.流体中，如果窗口过小，导致段落自动换行，可以使用display: -webkit-box;
overflow: hidden;-webkit-line-clamp: 2;-webkit-box-orient: vertical;四个属性配合使用，设定段落不能超过2行，多余的则隐藏。
6.响应式布局即手机端、Ipad端，PC端都能正常浏览网页，图片通过设置为max-width，所以使用的图片一般都要足够大，要使图片能自适应,图片必须插入,而不能当背景应用，然后使用百分比流体进行布局，使页面内容可以自适应。
7.设置父元素的样式，子元素可以继承，但是这种继承只适用于元素的外观（文字、颜色、字体等），元素在页面上的布局样式则不会被继承，如果想要继承这种样式，就必须使用强制继承inherit。
8.在响应式布局中，应该更多的让子元素继承父元素的width值，而不是直接使用绝对像素，这样可以减少媒体查询的设置。有时，可以复制多个父元素，从而继承父元素的某些特性值。
9.如需要做一个透明层，可以用opacity: 1;background-color: transparent;配合使用即可。
10.父元素设置了overflow:auto，并设置了宽高，如果超出父元素宽高，会生成滚动条，子元素无论怎么样都无法脱离父元素，即使使用定位也不行。
11.div默认的宽度是浏览器的100%。
12. 可以为边框加阴影box-shadow: h-shadow v-shadow blur spread color （inset）;其中h-shadow v-shodow为水平、垂直阴影，bur为模糊距离，spread为扩散距离，都可以用像素为单位,color可以用rgba设置颜色，inset不设为外部阴影，设置为内部阴影。让元素四边都有阴影效果方法是：box-shadow: Xpx Xpx Ypx Ypx color （inset）;其中Y一般要大于X 5倍以上效果才好。
13.opacity用于设置元素的透明度，其中0为完全透明；当前元素的所有子元素都会跟随当前元素的透明度。
14.导入CSS文件的常用方法：导入式导入到HTML文件中，方法是：
此处注意.css文件的路径，导入式会在整个网页装载完后再装载CSS文件。
链接式：
初始三个div盒子1,2,3垂直排布，给盒子1和盒子3加右浮动，盒子3却没有成功右浮，这是因为浮动只能以盒子固有的高度左浮动或右浮动，而不会向下或向上浮动1px，因此，当盒子1右浮动，脱离文档流，盒子2和盒子3占据盒子1的位置，然后盒子3再向右浮动，而盒子2和高度<盒子1的高度，因而盒子3水平右浮，会碰到盒子1的左边框，但是盒子3不能向下浮动，所以会出现在盒子1和盒子2的中间位置。
19.页面常用字体,应放在css里面的body样式：font-family:“Helvetica Neue”,Helvetica,Arial,“microsoft Yahei UI”,“Microsoft YaHei”,SimHei,“宋体”,simsun,sans-serif;
20.做移动端需要在head中写入相关参数：
CSS3
基本选择器：1.通用元素选择器 * 2.标签选择器 tag
3.类选择器 .className 4.ID选择器 #ID
组合选择器：1.群组选择器tag1,tag2
2.后代元素选择器 tag1 tag2
3.子元素选择器tag1>tag2
4. 交集选择器 p.test //p标签上class为test的对象
5.毗邻元素选择器tag1+tag2 //匹配一个当前元素的下一个同级元素
6. 相邻兄弟选择器 div~p{} //div后面所有同级p标签
属性选择器：（可以组合使用）
1.[title] 选中所有具有title（包括自定义属性和自带属性）属性的标签元素；
2. P[title] 选中所有具有title属性的P标签元素（P可以是任意标签）
3.[title=Nick] 选中所有title属性等于“Nick” 的标签元素；例如：Class中有多个属性值，Nick必须包括所有的属性值。
4.[title^=Nick] 选中属性为title,属性值以Nick值开头的每个标签元素,如果属性值包括多个空格隔开的值，必须把空格符也带上，例如
Class= “box box1_1”，则Nick可以写成"box bo “。
5.[title$=Nick] 选中属性为title,属性值以Nick值结尾的每个标签元素,如果属性值包括多个空格隔开的值，必须把空格符也带上，例如
Class= “box box1_1”，则Nick可以写成"x box1_1”。
6.[title*=Nick] 选中属性为title,属性值包含Nick值的每个标签元素,如果属性值包括多个空格隔开的值，必须把空格符也带上，例如
Class= “box box1_1”，则Nick可以写成"x bo"。
7.[title~=Nick] 选中属性为title，属性值由零个或多个空格分隔的值，其中一个值等于“Nick” 的标签元素。例如
Class= “bx box box1_1”，则Nick可以写成"box"。
8. [title|=Nick] 选中属性为title，属性值由零个或多个连字符（-）相连的值，并且属性值以“Nick” 开头的标签元素。例如
Class= “bx-box-box1_1”，则Nick可以写成"bx" ;另外Nick最多可以加一个连字符，例如Nick可以写成" bx-box"。
伪元素：(默认情况下是inline)
- P::after 在每个
元素（可以是任意元素tag）的内容之后插入内容,并可以为其设置CSS样式;例如
p::after
{
content:“台词”;
background:red;
} - P::before 在每个
元素（可以是任意元素tag）的内容之前插入内容,并可以为其设置CSS样式;例如
p::before
{
content:“台词”;
background:red;
}
伪类选择器总汇
动态伪类选择器：
a:link （未访问的链接状态，a标签特有）,用于定义了常规的链接状态。
a:hover （鼠标放在链接或鼠标放在其他标签上的状态）,用于产生视觉效果。
a:active （在链接或其他标签元素上按下鼠标时的状态，只有一瞬间）。
a:visited（已访问过的链接状态，a标签特有）,可以看出已经访问过的链接。
:foucs 动态选择器获取焦点的元素2
结构性伪类选择器:
示例：
ul > li:nth-child(2)：ul为父元素，选择li的第n个元素
:root 根元素选择器选择文档中的根元素3
:first-child 子元素选择器 选择元素中第一个子元素2
:last-child 子元素选择器 选择元素中最后一个子元素3
:only-child 子元素选择器 选择元素中唯一子元素3
:only-of-type 子元素选择器 选择指定类型的唯一子元素3
:nth-child(n) 子元素选择器 选择指定N 个子元素3
UI 伪类选择器：
UI 伪类选择器是根据元素的状态匹配元素
:enabled UI 选择器 选择启用状态的元素3
:disabled UI 选择器 选择禁用状态的元素3
:checked UI 选择器 选择被选中input 勾选元素3
:default UI 选择器 选择默认元素3
:valid UI 选择器 验证有效选择input 元素3
:invalid UI 选择器 验证无效选择input 元素3
:required UI 选择器 有required 属性选择元素3
:optional UI 选择器 无required 属性选择元素3
其他伪类选择器：
:not 其他选择器 否定选择的元素，即反选3
:empty 其他选择器 选择没有任何内容的元素3
:lang 其他选择器 选取包含lang 属性的元素2
:target 其他选择器 选取URL 片段标识指向元素，定位到锚点时，选择此元素3
X Y:nth-child(n): 选中Y个元素，该元素必须是X父元素下的第n个子元素Y，即在X父元素下，所有不分类型、同级的子元素按顺序排列，从1开始计数，选择第n个子元素Y；X可以省略、省略表示在选择某个父元素下的第n个子元素Y，即父元素可以有很多个。
说明：
:nth-child(n+6)表示选中从第6个开始的子元素
:nth-child(-n+9)表示选中从第1个到第9个子元素
继承
父元素设置的属性，所有后代元素也能用
A、只有color-/text-/font-/line-开头的属性，才有继承性
B、a标签的文字颜色和下划线是不会继承父类的
字体属性:
font-style: normal 文本正常显示；italic 文本斜体显示；oblique 文本倾斜显示。
font-variant:normal(默认值)；small-caps(小型大写字母)；
font-weight: normal（默认）；bold（加粗）；bolder（相当于和标签）
lighter （常规）；100 ~ 900 整百（400=normal，700=bold）（目前只有默认和加粗能显示出来）。
font-size：medium（默认）；可选参数值：xx-small、 x-small、 small、 medium、 large、 x-large、xx-large，也可以使用像素等单位。
font-family：字体名称（使用逗号隔开多种字体）
font：字体大小/行高 字体;（字体要在最后）
font：font-style font-variant font-weight font-size/line-height font-family
文本属性:
white-space:
normal：默认处理方式；
nowrap：不保留空格，强制在同一行内显示所有文本，直到文本结束或者碰到br标签；
pre：保留文本自带的空格和换行，当文字超出边界时不换行（文本自带除外）；
pre-wrap：保留文本自带的空格和换行，当文字碰到边界时换行；
pre-line：不保留空格，保留文字自带的换行，当文字碰到边界时换行
text-shadow：其中四个值，第一个值：水平偏移；第二个值：垂直偏移；第
三个值：阴影模糊度（可选）；第四个值：阴影颜色（可选）。
word-wrap：设置过长的单词是否断开
文本的方向
direction: ltr 默认，文本方向从左到右；rtl 文本方向从右到左。文字的方向表示文字是从那边开始（例如rtl，如果文字过多，可能会超出左边的边界），但是这并不会影响到文字本身的顺序问题，并且父元素设置了方向，整个子标签元素会跟着改变，并且文字也会跟着改变方向。
文本的水平对齐方式
text-align:left、center、right
text-align(center):设置某个盒子中“文字”、“图片”、“超链接”水平居中
margin(0 auto)：被设置这个属性的盒子,在其父级里居中
letter-spacing: 添加字母之间的空白
word-spacing: 添加每个单词之间的空白
属性控制文本的大小写
text-transform: capitalize 文本中的每个单词以大写字母开头；uppercase 定义仅有大写字母；lowercase 定义仅有小写字母。
内容溢出元素框
overflow:
visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
text-overflow: clip 修剪文本；ellipsis 显示省略符号…来代表被修剪的文本；string 使用给定的字符串来代表被修剪的文本(PC端测试只有ellipsis有作用，并且要配合white-wrap和overflow使用)。
文本的装饰
text-decoration: none 默认；underline 下划线；overline 上划线；line-through 中线。
背景属性
background-color: 背景颜色
background-image 设置图像为背景url(" ");
background-image:linear-gradient(Xdeg，green X%,blue Y%,yellow Z%,red E%); 线性颜色渐变效果，其中X位角度，向上为0deg，X%，Y%，Z%，E%为百分比占比。默认情况下：起始色和末位色 为必须参数，并且默认占比起始位0%，末尾为100%
background-image: radial-gradient(green X%,blue Y%,yellow Z%,red E%);
径向颜色渐变效果，其中X%，Y%，Z%，E%为百分比占比。默认情况同上。
background-position：设置背景图像的位置坐标（使用方法相当于图片元素的定位，但是和定位不同，在图片元素定位中：如果图片超出父元素的边界，图片一张显示；而背景图片，使用background-positon，超出父元素部分将不可见）
background-repeat： no-repeat；round 自动缩放；space 以相同的间距平铺 background-attachment：scroll（默认）背景图像是否固定或者随着页面的其余部分滚动
background-size：contain尽可能让图片完整的显示在元素内；cover全屏铺面一张大图
background-origin：border-box 在元素盒子内部绘制背景；padding-box 在内边距盒子
内部绘制背景；content-box 在内容盒子内部绘制背景
background-clip：border-box 在元素盒子内部裁剪背景；padding-box 在内边距盒子内
部裁剪背景；content-box 在内容黑子内部裁剪背景
background 简写
background: url(“o_ns.png”) no-repeat center bottom 15px;
background: url(“o_ns.png”) no-repeat left 30px bottom 15px;
background:[color][image][repeat][attachment][position]/[ size][ origin][-clip];
列表属性
list-style-type:none 去除标志； square 方框；circle 空心圆；disc 实心圆（默认）
list-style-position：标志的位置inside； outside（默认）。
list-style-image：将图象设置为列表项标志
list-style: list-style-tyle list-style-position list-style-image;
边框样式
border-width：边框宽度
border-style： solid (默认); double 双线; dotted 点状线条; dashed 虚线
border-color：边框颜色
border-radius：圆角（三个参数：左上、左下 右上、右下）
border: border-width border-style border-color;
表格样式
border-collapse: separate 默认值，单元格边框独立;collapse 单元格相邻边框被合并border-spacing: 长度值,表示间距, 在border-collapse: separate;的状态下才有效。
caption-side: top 默认值，标题在上方,bottom 标题在下方
empty-cells: show 默认值，显示边框;hide 不显示边框; 单元格内容为空是否隐藏边框。
table-layout: auto 默认值，内容过长时，拉伸整个单元格,fixed不拉伸整个单元格
盒子模型
padding、margin：（三个参数：上、左右、下）
display：none 不显示；block 显示为块级元素；inline 显示为内联元素；inline-block 行内块元素（会保持块元素的高宽）。
visibility：visible 元素可见；hidden 元素不可见（占据文档空间）
float：none； left 左浮动； right 右浮动；
clear： none（默认值）； left； right； both
z-index：X；仅在定位元素上有效,默认值为0（例：position:absolute;）
min-width：auto、长度值或百分比设置元素最小宽度
min-height：auto、高度值或百分比设置元素最小高度
max-width：auto、长度值或百分比设置元素最大宽度
max-height：auto、高度值或百分比设置元素最大高度
auto 是默认值，width 在auto 下是100%的值；height 在auto 下是自适应。
盒子阴影
box-shadow：hoffset voffset blur spread color inset
hoffset：阴影的水平偏移量，正值表示阴影向右偏移，负值表示阴影向左偏移。
voffset：阴影的垂直偏移量，正值代表阴影位于元素盒子的下方，负值位于元素盒子上方
blur：指定模糊值，是一个长度值，值越大盒子的边界越模糊。默认值为0，边界清晰
spread：阴影延伸半径，正值代表阴影向盒子各个方向延伸扩大，负值阴影沿相反方向缩小
color：设置阴影的颜色，如果省略，浏览器会自行选择一个颜色
inset：将外部阴影设置为内部阴
轮廓样式
outline：在边框的外围再增加一圈轮廓。
outline-color 颜色外围轮廓的颜色
outline-offset 长度轮廓距离元素边框边缘的偏移量
outline-style 样式轮廓样式，和border-style 一致
ontline-witdh 长度轮廓宽度
outline：outline-color outline-style <宽度> ontline-witdh
旋转
transform:
transform-origin: left; origin:旋转基点（left top center right bottom ）、transform-origin: 50px 50px; origin:旋转基点（Xpx Ypx）
transform:rotate(50deg); 旋转角度可以为负数，需要先定义transform-origin（即以transfrom-origin为旋转中心点进行50deg旋转）。rotate（旋转）
transform:skew(50deg,50deg); 分别为相对x轴倾斜,相对y轴倾斜。 skew(扭曲)
transform:scale(2,3); 横向放大2倍，纵向放大3倍； scale(缩放)
transform:scale(2); 横竖都放大2倍。
transform:translate(50px, 50px)；分别为相对x轴移动,相对y轴移动。（translate 移动）
前缀
Chrome、Safari：-webkit-
Opera：-o-
Firefox：-moz-
Internet Explorer：-ms-
块状元素：所有容器级标签都是块状元素，p是块级元素
内联元素 ：所有文本级元素除了p都是行内元素
块级(block)：块状元素独占一行，没有设置宽度,块元素默认与父元素一样宽度。
内联(inline)：行内元素不会独占一行，行内元素不能设置高度、宽度的
内联块级(inline-block),img标签、表单标签：不独占一行；可以设置宽度、高度。
过渡动画
div{
width:50px;
background-color:blue;
transition-property:width,background-color;//告诉系统,哪个属性需要加过渡效果,多个属性用逗号隔开
transition-duration:5s,4s;//过渡效果要几秒完成,不加没有过渡效果,多个属性用逗号隔开
transition-timing-function: linear;//动画速度
transition-delay:2s;//鼠标放在div上延迟2s再去执行动画
//简写
transition:width,background-color 5s,4s linear 2s ; //过渡属性 过渡时长 速度 延迟,过渡属性可以写all，代表所有属性
}
div:hover{
width:100px; //只加这个比较生硬,这时候要加过渡
background-color:red;
}
基本颜色16种：
black #000000 0,0,0 黑色
silver #c0c0c0 192,192,192 银灰色
gray #808080 128,128,128 灰色
white #ffffff 255,255,255 白色
maroon #800000 128,0,0 栗色
red #ff0000 255,0,0 红色
purple #800080 128,0,128 紫色
fuchsia #ff00ff 255,0,255 紫红
green #008000 0,128,0 绿色
lime #00ff00 0,255,0 闪光绿
olive #808000 128,128,0 橄榄色
yellow #ffff00 255,255,0 黄色
navy #000080 0,0,128 海军蓝
blue #0000ff 0,0,255 蓝色
teal #008080 0,128,128 水鸭色
aqua #00ffff 0,255,255 浅绿色
更多颜色地址：http://xh.5156edu.com/page/z1015m9220j18754.html
javascript
1.当设置需要a标签的效果，但是不需要a标签的链接，可以把a标签的属性设置为href=“ javascript:void(0)” 。
2.当使用定位百分比%来设置标签的位置，例如50%，可以再使用margin来调整元素的位置，例如当前元素为80px，则margin:-40px 0;则是居中。
3.当某个标签具有连个类名，如果其中一个设置了left定位，再用另外一个设置right定位，则right定位会失败，需要把left设为auto，再设置right才有效果。
4.当利通background设置了背景图片，当需要再设置背景颜色时，不能再使用background，因为会造成覆盖，这时应该使用background-color，并且这样可以设置颜色的透明度opacity。
5.当要自动触发某个事件时，可以用相应的DOM元素加事件来触发：例如：DOM.onmouseout();此时将自动触发鼠标离开事件。
6.当给某个DOM绑定事件，并为该时间绑定函数时，不能直接引用函数里面变量的值，因为该值会因函数而改变。
7.常用图标库,可以直接下载来用http://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2，使用方法介绍https://www.cnblogs.com/fashandian/p/6880892.html
8.JS中，设置元素的属性，可以通过多种方法来设置，例如pics[i].style.display = “none”; pics[i].className = “none”(此方法会把所有的class属性覆盖掉); DOM.setAtrribute(“属性“，” 属性值” )；
9.对某个标签进行旋转,旋转的格式为transform: rotate(180deg);
10.当要设置某个圆时,可以设置width和height相等，再使用border-radius: 50%;即可设一个圆。
11.常用的两个方法，超时调用var timer=setTimeout(function(){},3000);间歇调用var timer=setInterval(function(){},3000);其中timer为方法返回的唯一ID，可用于取消调用，方法为clearTimeout(timer)或者clearInterval(timer); 但是通常情况下，很少真正使用间歇调用，因为后一个间歇调用可能在前一个间歇调用结束之前调用。因此，我们通常会使用超时调用来模拟间歇调用
css中可以和不可以继承的属性
不可继承的：display、margin、border、padding、background、height、min-height、max- height、width、min-width、max-width、overflow、position、left、right、top、 bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、 page-bread-before和unicode-bidi。
所有元素可继承：visibility和cursor。
内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text- decoration、text-transform、direction。
块状元素可继承：text-indent和text-align。
列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。
表格元素可继承：border-collapse。
可用postman软件来发送数据，测试后台是否正常工作。
网络字体设置：
现在css导入字体，和设置需要使用字体的元素样式：
@font-face {
font-family: ‘iconfont’;
src: url(‘iconfont.eot’);
src: url(‘iconfont.eot?#iefix’) format(‘embedded-opentype’),
url(‘iconfont.woff’) format(‘woff’),
url(‘iconfont.ttf’) format(‘truetype’),
url(‘iconfont.svg#iconfont’) format(‘svg’);
}
.iconfont{
font-family:“iconfont” !important; //必须其他可省略
font-size:16px;font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}
然后再html文件使用字体对应字体：
网络字体格式：
字体格式
对于@font-face而言，兼容性问题就是各浏览器所能识别的字体格式不尽相同。
TrueType格式(.ttf)
Windows和Mac上常见的字体格式，是一种原始格式，因此它并没有为网页进行优化处理。
浏览器支持：IE9+,FireFox3.5+,Chrome4.0+,Safari3+,Opera10+,IOS Mobile Safari4.2+
OpenType格式(.otf)
以TrueType为基础，也是一种原始格式，但提供更多的功能。
浏览器支持：FireFox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,IOS Mobile Safari4.2+
Web Open Font格式(.woff)
针对网页进行特殊优化，因此是Web字体中最佳格式，它是一个开放的TrueType/OpenType的压缩版，同时支持元数据包的分离。
浏览器支持：IE9+, FireFox3.5+, Chrome6+, Safari3.6+,Opera11.1+
Embedded Open Type格式(.eot)
IE专用字体格式，可以从TrueType格式创建此格式字体。
浏览器支持：IE4+
SVG格式(.svg)
基于SVG字体渲染的格式。
浏览器支持：Chrome4+, Safari3.1+, Opera10.0+, IOS Mobile Safari3.2+
这就意味着在@font-face中我们至少需要.woff,.eot两种格式字体，甚至还需要.svg等字体达到更多种浏览版本的支持。