强标签和仿粗体渲染之间的@font-face 问题

Question

我的网站是通过@font-face 在 Avenir Medium 中设置的，如下所示：

@font-face {
    font-family: "Avenir-Medium";
    src: url("/Shared/fonts/Avenir-Medium.ttf") format('truetype'), 
    url("/Shared/fonts/Avenir-Medium.woff") format('woff');
}

我通过身体应用这个：

body {
    font-size: 1em;
    line-height: 1.25em; 
    background-color: #E8E8E8;
    font-family: "Avenir-Medium", Arial, Verdana, sans-serif;
}

这很好地为正文拉入了正确的字体。然而，<strong> 标签在 PC（Chrome、FireFox、IE 等）上看起来很糟糕，因为它是虚假的粗体渲染。在这一点上，我决定我需要引入 Avenir 的斜体/粗体版本：

@font-face {
    font-family: "Avenir-Heavy";
    src: url("/Shared/fonts/Avenir-Heavy.ttf") format('truetype'), 
    url("/Shared/fonts/Avenir-Heavy.woff") format('woff');
}

@font-face {
   font-family: "Avenir-MediumOblique";
   src: url("/Shared/fonts/Avenir-MediumOblique.ttf") format('truetype'), 
   url("/Shared/fonts/Avenir-MediumOblique.woff") format('woff');
}

在这些正确拉入之后，我制定了以下 CSS 规则：

strong {
    font-weight: normal;
    font-style: normal;
    font-family: "Avenir-Heavy", Arial, Verdana, sans-serif;
}


em { 
    font-weight: normal;
    font-style: normal;
    font-family: "Avenir-MediumOblique", Arial, Verdana, sans-serif;
}

这就是我的问题所在。在 Mac 上，会为任何 <strong> 和 <em> 声明引入正确的字体。不过，在 PC 上……人造渲染似乎正在抬起它丑陋的脑袋。粗体字体现在看起来很糟糕，即使浏览器说它正在为<strong> 声明引入 Avenir-Heavy。

您可以查看此问题的示例here。

Answer 1

当我遇到关于使用 google 字体“Alegreya SC”粗体、正常和斜体的类似问题时，我发现此链接非常有用。

http://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/

根据该网站，我使用 font squirrel 创建了更多字体格式，并提出了一个像这样的防弹版本

 @font-face {
            font-family:alegreyareg;
            src: url(webfontkit/alegreyasc-regular-webfont.eot?#iefix) format('embedded-opentype'),
                 url(webfontkit/alegreyasc-regular-webfont.woff) format('woff'),
                 url(webfontkit/alegreyasc-regular-webfont.ttf) format('truetype'),
                 url(webfontkit/alegreyasc-regular-webfont.svg#svgFontName) format('svg');
        }
        @font-face {
            font-family:alegreyabold;
            src: url(webfontkit/alegreyasc-bold-webfont.eot?#iefix) format('embedded-opentype'),
                 url(webfontkit/alegreyasc-bold-webfont.woff) format('woff'),
                 url(webfontkit/alegreyasc-bold-webfont.ttf) format('truetype'),
                 url(webfontkit/alegreyasc-bold-webfont.svg#svgFontName) format('svg');
        }
        @font-face {
            font-family:alegreyaital;
            src: url(webfontkit/alegreyasc-italic-webfont.eot?#iefix) format('embedded-opentype'),
                 url(webfontkit/alegreyasc-italic-webfont.woff) format('woff'),
                 url(webfontkit/alegreyasc-italic-webfont.ttf) format('truetype'),
                 url(webfontkit/alegreyasc-italic-webfont.svg#svgFontName) format('svg');
        }

这似乎对我有用。希望这对您也有帮助。