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


27

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:

insira a descrição da imagem aqui


Você pode fornecer mais detalhes: em quais navegadores ele não é bem renderizado? Você pode mostrar alguns exemplos de capturas de tela? Pode haver um problema básico subjacente com o processamento aqui em vez de um problema de fonte
Pekka suporta GoFundMonica

2
Não é apenas uma questão de navegador, mas de sistema operacional. O Windows possui uma renderização de fontes que é diferente dos Mac OS. Eu não tenho um Mac comigo (apenas um Ipod Touch) no momento e não posso mostrar a diferença, mas mesmo em um navegador bem renderizado para antialiasing, a fonte de rosto não é bem implementada para fontes não padrão do SO. Fiquei me perguntando (porque eu tenho um conjunto limitado de fontes), quais pessoas estão usando e que não são mal renderizadas no PC.
Littlemad

@Yi Jiang: Exatamente porque a quantidade de fontes é enorme e não é possível testar tudo, ou ter tudo, estou perguntando o que são, por experiência de todos, quais são as "fontes e tamanho seguros" usar. Percebo que ninguém postou nada e não sei se alguém irá postar alguma coisa (ou tentou analisar a renderização das fontes no PC), por isso estou mais triste por não ter nenhum feedback.
Littlemad

"meio decente" é puramente subjetivo.
DA01 25/01

Respostas:


18

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:

evidência 1

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):

evidência 2

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: evidência 3

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: evidência 4

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: evidência 5CT:evidência 6

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: evidência 7 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.


Este é um CW, então apenas edite-o se eu estiver errado; ou adicione detalhes se você conhece alguns.
Jari Keinänen

2
Grande explicação koiyu, era como eu suspeitava, mas não podia ter certeza até que ele postou um screenshot
JamesHenare

Sua postagem me faz duvidar. Verifiquei minhas configurações e lembrei-me de que, ao instalar o OS Vista, reduzi ao mínimo todo o efeito para melhorar o desempenho. E adivinha? Cleartype foi desativado. Eu sou uma pessoa tão estúpida, desculpe pela incoveniência. Agora, as fontes parecem muito melhores, definitivamente legíveis. Então, saiba que minha pergunta é mais: de qual SO Cleartype não está instalado no Windows?
Littlemad

@ Littlemad nenhum problema :) Foi útil para mim também verificar as fontes para que eu pudesse fornecer algum tipo de resposta em vez de uma mera opinião .
Jari Keinänen 26/01

11
@ Littlemad, cleartype foi introduzido pela primeira vez no Windows XP, embora desativado por padrão. A partir do Windows Vista, agora está ativado por padrão. Também no Internet Explorer 7, ele é ativado mesmo que não esteja ativado em todo o sistema operacional. Fonte: en.wikipedia.org/wiki/ClearType
JamesHenare

2

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.


11
Não, não é o mesmo, Hinting não resolve o problema. Já estou usando a solução publicada na web sobre o Font-Face que o Fontsquirell está usando. O que estou procurando é: mesmo que não seja renderizada bem alguma fonte, qual parece decente o suficiente para usar no PC? e em qual tamanho da fonte? Estou procurando uma lista de fontes seguras em tamanho seguro. Um tipo de referência de "melhores práticas".
Littlemad 21/01

Uma prática recomendada é não usar QUALQUER fonte da Web incorporada para tamanhos de texto. Eles não são otimizados para isso. Deixe-os para títulos e cabeçalhos.
DA01 25/01

11
@ DA01: Sou web designer, quero projetar e usar boa tipografia, não posso simplesmente ignorar as fontes, quero descobrir quais são aceitáveis ​​para poder usar.
Littlemad

@ Littlemad Sou também um web designer que deseja criar e usar uma boa tipografia. Eu sei que a incorporação de fonte, pelo menos por enquanto, usa principalmente tipos de letra que não são otimizados para pequenos tamanhos de texto nas telas. Eles geralmente têm falta de dicas e suas métricas podem variar muito, causando danos se a face incorporada não estiver disponível para um usuário específico. O uso de fontes do sistema otimizadas para tamanhos de texto em telas está usando boa tipografia.
DA01 26/01

11
@ DAO1: Sim, também não sou muito fã desse modelo, mas estava tentando ressaltar que é uma questão de fontes boas versus ruins, não que fontes incorporadas sejam inerentemente ruins.
Russell Leggett

1

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.


0

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.


Thx pela explicação, mas eu sei que o problema é o Windows, mas estou perguntando mais: que tipo de fonte você testou ou usou no seu site / cliente-site que você está usando e ainda parece "razoavelmente" decente no Windows?
Littlemad

Na verdade, isso varia de navegador para navegador. O Firefox e o IE renderizarão a mesma fonte de maneira diferente, apenas porque um usa EOT e o outro usa OTF / TTF / WOFF. E o ClearType também usa a renderização de subpixel. Muitas pessoas preferem o antialiasing de fonte do OS X sobre as opções do Windows.
Calvin Huang

@ Littlemad, o que você quer dizer com "razoavelmente decente", quero dizer que acabei de me entregar ao fato de que ela não renderiza bem. Aqui está o Windows 8.
dkuntz2

@Calvin Huang: sim, eu sei sobre a diferença de renderização do navegador, mas não é a questão principal. É relacionado ao sistema operacional. Atualmente, o navegador processa decentemente o alias de fontes. Windows ainda não. @DKuntz: O que você quer dizer com "Windows 8"? Eu vejo muitas pessoas usando em um site importante a fonte, e é realmente muito feio ver esse bom designer fazer isso. Portanto, estou procurando uma solução maligna menor, ainda mal renderizada, mas pelo menos decente o suficiente para não parecer um tipo de texto do Commodore 16. Caso contrário, eu tenho que usar uma solução js para verificar o seu navegador e passar um estilo css se você é Mac ou PC
Littlemad

4
Esta explicação está incorreta ou pelo menos incompleta. O Windows faz anti-aliasing de subpixel - é isso que Cleartype é e existe desde o XP. Comparado com o OS X, o Windows não faz a renderização de fontes incorretamente , é diferente - a diferença é subjetiva, na melhor das hipóteses, e você encontrará pessoas que preferem como as fontes são renderizadas no Windows. Além disso, os navegadores no Windows também usam métodos de renderização diferentes - por exemplo, todas as fontes em tamanhos grandes no Firefox até 3.6 no Windows exibem irregularidades visíveis. Isso é resolvido na versão 4, alternando para a API DirectWrite.
Yi Jiang


0

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


2
Por favor, você pode mostrar melhor um pedaço de código para mostrar aos leitores o que você quer dizer?
Mensch
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.