企业🤖AI Agent构建引擎,智能编排和调试,一键部署,支持私有化部署方案 广告
~~~ @font-face { font-family: 'FlipFlop'; src: url('FlipFlop.eot');/* IE9+ */ src: url('FlipFlop.eot?#iefix') format('embedded-opentype'),/* IE6-IE8 */ url('FlipFlop.woff') format('woff'),/* chrome、firefox */ url('FlipFlop.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ url('FlipFlop.svg#FlipFlop') format('svg'); /* iOS 4.1- */ font-weight: normal; font-style: normal; } ~~~ 在@font-face处理兼容中出现了一个#iefix这个东东?到底是神马东西呢? 具体如下: ![](https://box.kancloud.cn/2016-01-06_568d1b600df61.png) ## iefix有何作用?   IE9 之前的版本没有按照标准解析字体声明,当 src 属性包含多个 url 时,只会读取类似 src:url() 这样的格式,所以 IE 6-8 会把第一个引号到最后一个引号之间的内容都当做字体的 URL,结果就会返回一个 404错误,而其他浏览器会自动采用自己适用的 url。因此把仅 IE9 之前支持的 EOT 格式放在第一位,然后在 url 后加上 ?,这样 IE9 之前的版本会把问号之后的内容当作 url 的参数。至于 #iefix 的作用,一是起到了注释的作用,二是可以将 url 参数变为锚点,减少发送给服务器的字符。 ## 为何有两个src?   绝大多数情况下,第一个 src 是可以去掉的,除非需要支持 IE9 下的兼容模式。在 IE9 中可以使用 IE7 和 IE8 的模式渲染页面,微软修改了在兼容模式下的 CSS 解析器,导致使用 ? 的方案失效。由于 CSS 解释器是从下往上解析的,所以在上面添加一个不带问号的 src 属性便可以解决此问题。 > [@font-face中#iefix的详解](http://www.lofter.com/postentry?from=search&permalink=373374_60afdbf)