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等字体达到更多种浏览版本的支持。