一,css兼容
css3和html5不一样，虽然w3c努力将他们和为一体，当然css3也有自己的一套标准。当然令人头疼的又是IE浏览器。如border-radius圆角属性，IE老版本就不认识，自然就不会识别。所以解决此问题，最终定案为开发者前缀的方法，就是在属性前加一个前缀如-moz-border-radius。
| 前缀 | 浏览器 |
|---|---|
| -moz- | Firefox |
| -webkit- | chrome和Safari引擎都是webkit |
| -ms- | IE浏览器 |
| -o- | Opera |
二,引入外部字体
引入的方法@font-face功能,其实并不算一个新方法,css2的时候ie就支持font-face,只不过当时浏览器开发商意见不统一就废除掉了,但css3又重新打造了一个新的标准
2.1web字体格式
尽管所有浏览器都支持font-face,但他们支持的字体格式却不一样,像IE只支持EOT格式
字体格式有四种
| 格式 | 说明 | 浏览器 |
|---|---|---|
| TIF/OTF | 桌面app常用格式 | Firefox3.6 chrome6 |
| EOT | 微软专用 | IE9 |
| SVG | 字体的多功能图形格式 | safari mobile ios4之前 |
| WOFF | 唯一一个面向未来的字体格式 | IE9 Firefox3.6 |
字体包下载
首先将下载的字体放在项目的某一文件夹下引用
@font-face {
font-family: "Milkshake";//字体名字
src:url("./font/Milkshake.ttf");//引入字体位置
}
p{
font-family:"Milkshake" ;
}
例
网友评论