CSS - @font-face distorcido

[João Félix 0]

Boa noite a todos,

 

Estou com um pequeno problema com o @font-face no css, a font esta saindo um pouco distorcida, não sei se é comum, ou se é a própria font mesmo. Estou usando a font Caviar Dreams, o código é esse:

 

 

@font-face

{

font-family: 'caviar';

src: url('../Fonts/caviardreams-webfont.eot');

src: url('../Fonts/caviardreams-webfont.eot?#iefix') format('embedded-opentype'),

url('../Fonts/caviardreams-webfont.woff') format('woff'),

url('../Fonts/caviardreams-webfont.ttf') format('truetype'),

url('../Fonts/caviardreams-webfont.svg#caviar_dreamsregular') format('svg');

font-weight: normal;

font-style: normal;

}

e a font esta ficando como no exemplo da imagem:

Se puderem me ajudar a resolver este problema, ficaria muito grato.

Obrigado a todos.

[Diéssica 140]

É comum, já que a fonte geralmente não é renderizada com anti-aliasing pelo browser.

Uma alternativa é o Cufon:
:seta: http://cufon.shoqolate.com/generate/
(Mas ainda optaria pela praticidade do font-face)

Ou então tentar disfarçar o serrilhamento, usando a propriedade text-shadow. Segue um código que auxilia na maioria dos casos:

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

Importante lembrar que esse valor do rgba — preferi rgb, mas o valor pode ser em HEX — não será útil para todos o casos, então, se não funcionar de primeira, tente adaptá-lo.

[João Félix 0]

Obrigado pela ajuda, realmente é um problema na font mesmo.

Vou tentar mascarar usando o text-shadow conforme você me indicou.

 

Obrigado novamente pela ajuda.