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上虽然...人工渲染似乎正在养育它的丑陋头脑。粗体字体现在看起来很糟糕，即使浏览器说它在Avenir-Heavy中引用了<strong>声明。

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

Answer 1

我发现这个链接非常有用，当我遇到类似的问题关于使用谷歌字体＆＃34; Alegreya SC＆＃34;粗体，规范和斜体。

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

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

强字签和人造粗体渲染之间的@ font-face问题

1 个答案: