html - @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 应用它，例如:

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

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