文章為csslint中文版譯文，點(diǎn)擊原文可查看英文版，如遇到翻譯錯(cuò)誤或錯(cuò)別字啥的，請(qǐng)留言指出~ 譯文內(nèi)容不定期更新~ 返回目錄
當(dāng)使用@font-face來(lái) 跨游覽器聲明 多字體類型時(shí),你會(huì)發(fā)現(xiàn)在老版IE中出現(xiàn)404錯(cuò)誤,這是因?yàn)槔习鍵E在解析字體聲明時(shí)的缺陷。來(lái),舉個(gè)例子,看如下語(yǔ)法:
@font-face {
font-family: 'MyFontFamily';
src: url('myfont-webfont.eot') format('embedded-opentype'),
url('myfont-webfont.woff') format('woff'),
url('myfont-webfont.ttf') format('truetype'),
url('myfont-webfont.svg#svgFontName') format('svg');
}
在IE6,7和8上將為出現(xiàn)404錯(cuò)誤。解決方式 是在第一個(gè)字體鏈接后加上 ? (問(wèn)號(hào)),接下來(lái) IE 會(huì)把 余下的屬性值看作查詢字符串。以下為正確示例:
@font-face {
font-family: 'MyFontFamily';
src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'),
url('myfont-webfont.woff') format('woff'),
url('myfont-webfont.ttf') format('truetype'),
url('myfont-webfont.svg#svgFontName') format('svg');
}
規(guī)則詳情
規(guī)則 ID: bulletproof-font-face
此規(guī)則意在防止 在IE8及早期游覽器上 因?yàn)榻馕鲎煮w鏈接的缺陷而產(chǎn)生的404錯(cuò)誤。
以下示例會(huì)出現(xiàn)警告:
@font-face {
font-family: 'MyFontFamily';
/* First web font is missing query string */
src: url('myfont-webfont.eot') format('embedded-opentype'),
url('myfont-webfont.woff') format('woff'),
url('myfont-webfont.ttf') format('truetype'),
url('myfont-webfont.svg#svgFontName') format('svg');
}
以下示例將 不會(huì) 出現(xiàn)警告:
@font-face {
font-family: 'MyFontFamily';
src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'),
url('myfont-webfont.woff') format('woff'),
url('myfont-webfont.ttf') format('truetype'),
url('myfont-webfont.svg#svgFontName') format('svg');
}
此規(guī)則要求 第一個(gè)字體聲明為 帶查詢字符串的 .eot文件,但不會(huì)檢測(cè)余下的字體鏈接(這不是重點(diǎn),假定你已有了.eot文件)
