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

Question

我也在互联网和 Stack Overflow 上查找过，但即使很多人都讨论了这个主题，我也不确定如何有效地做到这一点。

我的意图是尽可能使用具有最大兼容性范围的CSS3 font-face，检查设备上是否已经安装了所使用的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;
}

Answer 1

李斯特先生说的太对了！此外，我发现了一个非常愚蠢的语法错误，导致他的建议无法工作：

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 旧浏览器兼容性 + 本地字体

CSS3 font-face old browsers compatibility + local fonts

css

webfonts

font-face