2012-03-01 2 views
3

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

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

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

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

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

ПОЖАЛУЙСТА ЗАМЕТЬТЕ, ЧТО Я НЕ МОЖЕТ ИСПОЛЬЗОВАТЬ ПЛОХОЙ СКВАЖИН!

+0

Можете ли вы разместить URL-адрес, чтобы мы могли взглянуть на ваш другой CSS? Похоже, применяется фальшивая смелость. Не связан с вашим синтаксисом шрифта. –

+0

@FontSquirrel Это главное меню - http://www.mediwales.com/v3/ – Rob

+0

Вы пытались удалить текстовый теневой стиль? Это было бы моей догадкой, почему у вас есть смелый, непоследовательный рендеринг ... –

ответ

2

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

@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 на вашем компьютере. Если он уже выделен полужирным шрифтом, шрифт НЕ МОЖЕТ быть уменьшен в размере, потому что это нормальный поиск шрифта.

+0

Я пробовал переупорядочивать, но ничего не влияет на это. – Rob