O tipo de fonte carregado no Windows parece muito ruim. Quais fontes você usa para renderizar melhor?

Edição : O problema era que eu não tinha "Cleartype" ativado nas minhas configurações no Vista. Esta pergunta pode não ter muito significado se o Cleartype estiver instalado / ativado no sistema operacional Windows.

Um novo vento de tipografia chegou à Web, com a propriedade font-face do CSS3 capaz de carregar fontes diferentes do conjunto de sistema operacional / sistema. Meu Mac processa muitos perfeitamente, enquanto minha máquina Windows não. Que conjunto de fontes devo usar que renderizará melhor no Windows?

Isso é semelhante a uma pergunta no Stack Overflow.

E aqui está um exemplo de site que parece ruim renderizado no PC com o Myriad Pro: http://css-tricks.com/

NOTA: Não estou falando sobre a diferença no antialiasing entre as versões do navegador (como entre o IE9 e o IE6).

Espero que, como resposta de seus testes, uma lista de fontes mais o tamanho (por favor, use px), que tenham boa aparência, ou pelo menos de uma maneira que possam ser usados ​​para textos curtos ou títulos pequenos.

Por exemplo, no momento "League Gothic, 30px" se parece com o seguinte:

Isso deve ser um comentário (por isso, fazendo essa CW), mas acho que existem alguns mal-entendidos e suposições erradas na questão. Como você obviamente quer que essa pergunta seja respondida (afinal você ofereceu uma recompensa), aqui estão meus dois centavos.

A partir da sua captura de tela, parece-me que você configurou o Windows para renderizar fontes regularmente (em oposição à renderização por subpixel) e provavelmente o seu navegador não realiza antialiasing (pode ser, mas depois ocorre com a compactação JPG).

Os exemplos a seguir, relacionados ao Windows, são do XP Pro SP 3, por isso é bastante seguro supor que a situação esteja pelo menos no mesmo nível no Vista e 7.

O Windows tem (no XP) opções para usar o ClearType ou não. Sem o ClearType, as fontes são renderizadas como na captura de tela. Esta é uma imagem com muito zoom da caixa de diálogo do Windows sem CT:

Você vê que é uma operação binária: o pixel é preto ou transparente. Agora, com alguns navegadores modernos, mesmo sem o CT, eles fazem alguma suavização de borda. É do css-tricks.com com Windows XP e Chrome 8 e o CT está desativado (como na figura anterior):

Veja o que aconteceu? Provavelmente você já o fez, como afirmou na sua pergunta.

NOTA: Não estou falando da diferença de antialiasing existente entre os novos navegadores e os antigos (como entre o IE9 e o IE6).

Agora, o ClearType !

Aqui está exatamente o mesmo texto da caixa de diálogo do Windows, desta vez com o CT:

Se você estiver interessado no que é baseado nisso, consulte o artigo da Wikipedia sobre renderização de subpixel . E ativar o ClearType afeta a renderização do navegador? O mesmo texto "outro" no Windows XP e Chrome 8 e ClearType está ativado:

Faz! E enquanto estamos nisso, devo acrescentar que (pelo menos) o IE 8 usa a renderização ClearType, mesmo se estiver desativado no nível do Windows.

Comparar 100% do texto com antialias e ClearTyped não é tão radical quanto comparar o texto com ClearTyped com os sem antialias. É visivelmente mais ousado, no entanto:

aa: CT:

Para ver como é a aparência sem antialiasing, basta ver a captura de tela de littlemad .

E para comparação, aqui está o mesmo "outro" na renderização padrão do OS X: ainda mais ousado que o ClearType.

Para responder sua pergunta: qualquer fonte . Se o sistema operacional renderizar a fonte de maneira diferente, pode ser porque você configurou o sistema operacional para renderizá-la . OU pode ser que seu navegador não seja capaz de antialiasing ou ClearType.

Outra pergunta seria por que algumas fontes são renderizadas corretamente e outras não - se esse for o caso (mas não vejo nenhum problema no site que você mencionou no Windows). Ou você está pedindo fontes que pareceriam adequadas sem qualquer renderização?

E aqui está também a resposta à pergunta freqüente: "Sim, eu sei tudo isso - por que o ClearType parece diferente da renderização do OS X ?!"

Porque eles são diferentes. A renderização de subpixel não é algo leve para implementar. ClearType é uma marca registrada da Microsoft e está protegida com 10 patentes (+ 1 pendente; consulte a Wikipedia ). Eles simplesmente não podem ser os mesmos.

Se o problema for o mesmo que a pergunta do Stackoverflow que você faz referência, a resposta também não é a mesma ?

Esse é um problema de dica .

Ao gerar seu kit de fonte (como no FontSquirrel), você precisa especificar Dicas nas opções de Especialista.

Escolha Especialista e, em Renderização, selecione:

Aplique dicas - melhore a renderização do Win.

ttfautohint pode ser usado para reconstruir o bytecode de dica da fonte; as configurações padrão (compatíveis com GDI) devem ajudar o Windows a renderizar a fonte.

Isso não tem nada a ver com o navegador, mas com o próprio Windows.

* Os sistemas nix (unix / linux e OSX estão incluídos nisso porque possui uma base Unix) têm a opção de controlar com precisão como o texto é exibido e geralmente são configurados para renderização de subpixel (que tem uma explicação muito mais técnica do que eu vou dar a você, mas ele essencialmente usa os subpixels (as partes vermelha, verde e azul dos pixels da tela) para renderizar o texto) onde o Windows usa cleartype, que é o seu próprio tipo de renderização. confuso na mecânica.

Basicamente, o Windows não renderiza subpixel, não são as fontes ou os arquivos, mas o sistema operacional que exibe essas fontes e arquivos.

Ativando o ClearType, no Windows XP:

1) Siga estas instruções: http://blogs.msdn.com/b/virtual_pc_guy/archive/2011/10/05/enabling-cleartype-on-windows-xp-mode.aspx

2) Agora, siga isto no seu IExplorer: http://www.microsoft.com/typography/cleartype/tuner/step1.aspx

Use o código abaixo em CSS

-webkit-font-smoothing: antialiased; text-shadow: 1px 1px 1px rgba(0,0,0,0.004);

Isso pode ajudá-lo