Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

rikaschmitt

Problema com font-face

Recommended Posts

Boa tarde galera.

 

Estou com problema com as fontes do meu site. Todo ele usará a fonte "DIN": regular, medium e light. No Google Fonts não tem, então estou utilizando os arquivos de cada fonte (webkit). O problema maior é que está havendo uma diferenciação no formato da fonte entre o fireworks e o browser.

 

Exemplo:

 

9wmP5oF.jpg

 

No fireworks abre na boa, nem pede substituição nem nada, pois tenho elas instaladas aqui... até usei a .ttf para gerar o webkit para os demais formatos.

 

Tá muito feio assim.. E se eu pedir para o designer alterar a fonte para outra mais aceitável, ele provavelmente vai reclamar e recusar.

 

No meu CSS está assim:

 

@font-face { 
  font-family: 'DIN-Light';
  src: local('DIN-Light');
  src: url('../fonts/DIN-Light.eot?#iefix') format('embedded-opentype'),
       url('../fonts/DIN-Light.eot') format('embedded-opentype');
  src: url('../fonts/DIN-Light.ttf') format('truetype');
}
@font-face { 
  font-family: 'DIN-Medium';
  src: local('DIN-Medium');
  src: url('../fonts/DIN-Medium.eot?#iefix') format('embedded-opentype'),
       url('../fonts/DIN-Medium.eot') format('embedded-opentype');
  src: url('../fonts/DIN-Medium.ttf') format('truetype');
}
@font-face { 
  font-family: 'DIN-Regular';
  src: local('DIN-Regular');
  src: url('../fonts/DIN-Regular.eot?#iefix') format('embedded-opentype'),
       url('../fonts/DIN-Regular.eot') format('embedded-opentype');
  src: url('../fonts/DIN-Regular.ttf') format('truetype');
}

Só está verificando as fontes .eot e .ttf porque a .svg e .woff eu retirei para testar se melhorava, mas tbm estavam sendo usadas.

 

O que pode ser? :(

Compartilhar este post


Link para o post
Compartilhar em outros sites

Olha, sinceramente, eu duvido que você consiga alcançar, com perfeição, a mesma renderização de fonte do FW. Varia muito do filtro anti-alias aplicado no programa, do tipo de anti-alias que seu OS aplica, e até mesma a que o browser pode sobrepor do OS.

 

O que posso sugerir é você dar uma forçada no serrilhamento das fontes para ver se ajuda, mais ou menos:

* {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-ms-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
-khtml-font-smoothing: antialiased;
}

Outra coisa que posso sugerir, para te ajudar nas nomenclaturas, é ao invés de utilizar três famílias diferentes para a mesma fonte (que na verdade só muda o peso dela), utilize o mesmo nome em 'font-family', e atribua valores diferentes em 'font-weight' e/ou 'font-style'.

 

Essa preocupação que você demonstra neste momento, eu já tive há alguns anos atrás. Após um momento, me abstive dela e passei a usar as fontes (desde o layout até o CSS final) sem anti-alias. Mas, hoje, atribuo a mesma fonte que o layout apresenta, e apenas tomo o cuidado do layout ficar 'aceitável' (larguras/alturas próximas, sem quebra etc). 'Pixel perfect' é coisa de designer mimado. Pense apenas em funcionar conforme proposto.

Compartilhar este post


Link para o post
Compartilhar em outros sites

De fato.

 

 

Testei esse anti aliasing e deu uma leve melhorada. Mesmo assim as fontes ficam estranhas.

 

Eu até trabalho com "weight" e o valor 600 é que o fica mais "aceitável", porém, transforma tudo em negrito hahahahaha.... Ai ai, não sei o que faço.

 

Geralmente gosto quando usam as webfonts do Google, tipo Roboto ou Open Sans.

 

Valeu pelas dicas, vou tentar ver oq faço aqui..

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.