CSS3 font-face老式浏览器兼容性+本地字体

问题描述：

我在互联网上和Stack Overflow上查找过，但即使很多人已经涉及这个主题，我不知道如何有效地做到这一点。CSS3 font-face老式浏览器兼容性+本地字体

我的目的是尽可能使用最大兼容性范围的CSS3字体，检查所用的webfont是否已经安装在设备上。然后，如果是，则让浏览器使用它而不是下载它。

这是我的尝试，那当然是不按预期工作。例如Firefox下载我的webfont的woff2版本。

@font-face{ 
    font-family: mplus-1c; 
    src: local('M+ 1c regular'), 
     local ('mplus-1c-regular'); 
    src: url('../fonts/mplus-1c-regular-webfont.eot'); 
    src: url('../fonts/mplus-1c-regular-webfont.eot?#iefix') format('embedded-opentype'), 
     url('../fonts/mplus-1c-regular-webfont.woff2') format('woff2'), 
     url('../fonts/mplus-1c-regular-webfont.woff') format('woff'), 
     url('../fonts/mplus-1c-regular-webfont.ttf') format('truetype'), 
     url('../fonts/mplus-1c-regular-webfont.svg#m_1cregular') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
}

浏览器仅使用一个'src'属性，所以它会忽略在你的例子是前两种。结合使用它们：使用'src：local（font），url（webfont）;'。另请参见[@ font-face src：local - 如果用户已拥有本地字体，如何使用本地字体？]（https://stackoverflow.com/q/3837249/1016716） –

是不是会让事情变得糟糕与＃＃脚本部分？ – matteobin

我并不十分熟悉所有不同IE变体的缺陷，但如果你想确保它能正常工作，我建议首先放置#ifixed，然后是本地和新的格式。然后，即使本地字体存在，旧的IE也会加载eot，但至少不会中断。 –

答

李斯特先生是绝对正确的！而且我发现，从工作阻止他的建议非常愚蠢的语法错误：

local ('mplus-1c-regular');

应该已经

local('mplus-1c-regular');

愚蠢的我。

再次感谢你，李斯特先生！总结”这件事，这里是正确的代码：

@font-face{ 
    font-family: mplus-1c; 
    src: url('../fonts/mplus-1c-regular-webfont.eot'); 
    src: url('../fonts/mplus-1c-regular-webfont.eot?#iefix') format('embedded-opentype'), 
     local('M+ 1c regular'), 
     local('mplus-1c-regular'), 
     url('../fonts/mplus-1c-regular-webfont.woff2') format('woff2'), 
     url('../fonts/mplus-1c-regular-webfont.woff') format('woff'), 
     url('../fonts/mplus-1c-regular-webfont.ttf') format('truetype'), 
     url('../fonts/mplus-1c-regular-webfont.svg#m_1cregular') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
}

CSS3 font-face老式浏览器兼容性+本地字体

相关推荐