Кросс-браузерное использование @ font-face - PullRequest
Новая
       21

Кросс-браузерное использование @ font-face

3 голосов
/ 01 марта 2012

У меня было много трудностей с использованием пользовательских шрифтов и @font-face. Я пытаюсь согласовать шрифт в последних версиях Chrome, Safari и Firefox (показано в таком порядке на снимке экрана ниже:

enter image description here

Я использую следующее для генерации этого: 

@font-face {
    font-family: 'dineng';
    src: url('fonts/dineng.eot');
    src: url('fonts/dineng.eot?#iefix') format('embedded-opentype'),
         url('fonts/dineng.woff') format('woff'),
         url('fonts/dineng.ttf') format('truetype'),
         url('fonts/dineng.svg#dineng') format('svg');
    font-weight: normal;
    font-style: normal;
}

И 

.menu-button a {
    height:25px;
    float:left;
    border-bottom:2px solid white;  
    color:#ccccff;
    text-decoration:none;
    padding:8px 21px 0px 20px;
    text-align:center!IMPORTANT;
    background-color:#00378f;
    font-size:18px;
    font-family:'dineng', Arial;
    text-shadow:0 0 1px rgba(0,0,0,0.3);
    }

Я пробовал все поместье шрифтового веса, чтобы уменьшить вес , но ничто не влияет на них. Я использовал хак CSS3 ниже для Chrome, чтобы он выглядел как мой PSD, но это не работает в других браузерах: 

text-shadow:0 0 1px rgba(0,0,0,0.3);

У кого-нибудь есть предложения, прежде чем я выпрыгну из окна !!

ПОЖАЛУЙСТА, ОБРАТИТЕ ВНИМАНИЕ, ЧТО Я НЕ МОГУ ИСПОЛЬЗОВАТЬ ШРИФТОВЫЙ ШПРИЦ!

1 Ответ

2 голосов
/ 05 марта 2012

Попробуйте так: 

@font-face {
    font-family: 'dineng';
    font-style: normal;
    font-weight: normal;
    src: url('fonts/dineng.eot');
    src: url('fonts/dineng.eot?#iefix') format('embedded-opentype'),
        url('fonts/dineng.woff') format('woff'),
         url('fonts/dineng.ttf') format('truetype'),
         url('fonts/dineng.svg#dineng') format('svg');
}

В противном случае откройте файл .TTF на своем компьютере.Если он уже выделен жирным шрифтом, размер шрифта НЕ удастся уменьшить, поскольку это нормальный вид шрифта.

...