css3兼容及引入字体

2022-09-15  本文已影响0人  扶光_

一,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" ;
        }
上一篇 下一篇

猜你喜欢

热点阅读