本篇内容介绍了“CSS3怎么设置字体兼容所有浏览器”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
1、设置字体（兼容所有浏览器）
@font-face{
font-family:'iconfont';
src:url("fonts/iconfont/iconfont.eot");
src:url("fonts/iconfont/iconfont.eot?#iefix")format("embedded-opentype"),
url("fonts/iconfont/iconfont.ttf")format("truetype"),
url("fonts/iconfont/iconfont.woff")format("woff"),
url("fonts/iconfont/iconfont.svg#icomoon")format("svg");
font-weight:normal;
font-style:normal;}
@font-face{font-family:name;src:url(url);sRules}
说明：
name: 字体名称
url: 使用绝对或相对地址指定OpenType字体
sRules: 样式表定义
设置嵌入HTML文档的字体。
@font-face{font-family:dreamy;font-weight:bold;src:url(http://www.example.com/font.eot);}
2、div[class^="test"]
设置只有div内class属性值以"test"开头的所有div元素的背景色：
div[class^="test"]
{
background:#ffff00;
}
3、[class*="abc"]
class的值中含有"abc"的元素。
div[class*="abc"]
代表只有div内class=abc的样式
4、指定最后一个p标签背景样式
p:last-child{background:#ff0000;}
5、显示设备分辨率最小768并且最大979时候显示abc（CSS3）
@media(min-width:768px)and(max-width:979px){
.abc{}
}
ie6-ie9支持
<style>
@mediascreenand(min-width:1201px){
.y-row{
width:1200px;
border:1pxsolid#333;height:300px;
min-width:1200px;}}
@mediascreenand(max-width:1200px){
.y-row{
width:900px;
border:1pxsolid#333;height:300px;
min-width:900px;}}
</style>
<!--[ifltIE9]>
<scriptsrc="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
6、div>span（IE6不支持）
div>span{字体12px}
div标签内的儿子span样式为字体12px，div内孙子span不起作用，具有优先
7、字体阴影
.blue{background:#01dbff;text-shadow:2px2px2px#09a5ef;}
阴影字体靠左距离靠下距离阴影距离范围阴影颜色
字体背景+字体阴影
8、盒子阴影
-moz-border-radius:0px5px5px0px;-webkit-border-radius:0px5px5px0px;border-radius:0px5px5px0px;-moz-box-shadow:0px0px1px#fffinset;-webkit-box-shadow:0px0px1px#fffinset;box-shadow:0px0px1px#fffinset;
-moz代表firefox浏览器私有属性
-ms代表IE浏览器私有属性
-webkit代表chrome、safari私有属性
-o代表opera苹果浏览器
设置
border-radius:0px5px5px0px;代表边框右上和右下圆角为5px
box-shadow:0px0px1px#fffinset;代表边框间距靠左0靠上0和1px阴影范围阴影颜色为白色
有inset代表框内阴影不带inset代表框外阴影
注意：box-shadow:0px0px1px#fff
第1个值为0时，代表左右边框阴影为1px范围
第1个值为正整数代表左边框阴影
第1个值为负整数代表右边框阴影
同理
第2个值为0代表上下边框阴影
第2个值为正整数代表1px阴影距离上边框多少
第1个值为负整数代表下边框阴影设置
border-radius圆角
9、:first-letter
p:first-letter{font-size:20px}
代表p标签内第一个字大小为20px
10、div:first-line{color:red;font-size:16px;}
代表DIV中第一行文字为红色字体为16px
11、pa:first-child{color:green}
代表p盒子里第一个a超链接字体颜色为绿色
12、p:before{content:"我在这"}
代表p标签对象前加入一段内容：“我在这”
13、table:after{content:ENDOFTABLE}
代表在table对象后显示内容“ENDOFTABLE”
14、单冒号与双冒号
伪元素由双冒号和伪元素名称组成。双冒号是在当前规范中引入的，用于区分伪类和伪元素。但是伪类兼容现存样式，浏览器需要同时支持旧的伪类，比如:first-line、:first-letter、:before、:after等。
那么现在就可以完整的回答中的问题了，对于CSS2之前已有的伪元素，比如:before，单冒号和双冒号的写法::before作用是一样的。
所以，如果你的网站只需要兼容webkit、firefox、opera等浏览器，建议对于伪元素采用双冒号的写法，如果不得不兼容IE浏览器，还是用CSS2的单冒号写法比较安全。
15、.uploaderinput[type=file]{}
代表class为uploader盒子内input标签属性为type=file设置样式
“CSS3怎么设置字体兼容所有浏览器”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站，小编将为大家输出更多高质量的实用文章！
