Проблемы @font-face между сильным тегом и ненастоящим рендерингом

Question

Мой сайт настроен в Avenir Medium через @font-face, как показано ниже:

@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> теги выглядят ужасно на ПК (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> деклараций. Хотя на ПК... искусственный рендеринг, кажется, воспитывает свою уродливую голову. Полужирные шрифты теперь выглядят ужасно, хотя браузер говорит, что он загружает Avenir-Heavy для <strong> деклараций.

Вы можете посмотреть пример этой проблемы здесь.

Answer 1

Я нашел эту ссылку очень полезной, когда столкнулся с подобной проблемой, касающейся использования шрифта Google "Alegreya SC", полужирный, нормальный и курсив.

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

Согласно этому сайту, я использовал шрифт-шрифт, чтобы создать еще несколько форматов шрифтов, и придумал версию с пуленепробиваемым покрытием, которая выглядит следующим образом

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

Казалось, это работает для меня. Надеюсь, это поможет вам.