~~~
@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這個東東?到底是神馬東西呢?
具體如下:

## 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)
- 序
- 開發自己的博客
- 面試集合
- 基礎
- 1、JavaScript
- js技巧
- 2、CSS
- position之absolute
- em與rem
- inline-block
- background
- 圓角、透明度、漸變
- 關于css中的0和none
- css display:none小結
- z-index小結
- 理解滾動條
- 有關@font-face的問題
- 3、HTML
- URI中依賴協議的URL
- 4、MySQL
- limit使用
- 5、jQuery
- 6、移動Web開發
- 設計稿與分辨率
- 字體
- 圖片的自適應
- 7、前端布局bug問題(!<=IE8)
- SEO與頁面結構
- seo
- vsphere 虛擬服務器
- 代碼里的彩蛋(神注釋)
- 玩轉HTML5移動頁面
- 知識梳理
- JS 鍵盤碼
- 其他資源記錄
- temp
- TODO
- 簡單有趣的庫??
- xx