css - 无法使徽标文本（字体）看起来类似于 firefox 的呈现方式（问题是 Internet Explorer）

Question

我使用 Lobster 字体，它在两个 chrome/firefox/opera/safari 和 internet explorer 中看起来完全不同。

它在 IE8、7 中不起作用

您可以在此处查看示例：dev.holiday.ge/xhtml -> 查看 firefox vs IE 中的红色徽标。

Answer 1

在：dev.holiday.ge/xhtml/all-ie-only.css

你有：

@font-face {
    font-family: 'Lobster';
    src: url('fonts/DroidSans.eot');
}

这应该是这样的：

@font-face {
    font-family: 'Lobster';
    src: url('fonts/Lobster.eot');
    src: url('fonts/Lobster.eot?#iefix') format('embedded-opentype'); /* IE6-IE8 */
}

如果你有 .eot

为了获得最佳字体兼容性，请使用以下语法：

@font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
     url('webfont.woff') format('woff'), /* Modern Browsers */
     url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */   
     url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */

}