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');

傻傻的我。

再次感谢Lister先生！总而言之，这是正确的代码：

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

1 个答案: