Recentemente, estou trabalhando em um projeto que exige o uso de fontes personalizadas que não são do Google. E começo a ter problemas. Por causa da diferença entre os suportes do navegador e as estratégias de renderização dos sistemas operacionais, é muito difícil obter um desempenho consistente dos tipos de fonte personalizados em diferentes sistemas operacionais e navegadores. As fontes parecem perfeitas no meu computador MAC, mas parecem tão pixelizadas no laptop Windows do meu cliente.
Por causa disso, começo a examinar os problemas e métodos de renderização de fontes. E descobri que este é um assunto universal e complicado.
Soluções Comuns
Em primeiro lugar, quero apontar as soluções que encontrei na internet que são de alguma forma úteis no meu projeto.
O primeiro é de truques de CSS e fornece o suporte mais profundo:
```CSS
@font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff') format('woff'), /* Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
```No artigo de truques de CSS , Chris Coyier também apontou uma maneira alternativa de resolver isso com base na tendência de oferecer suporte a WOFF em diferentes navegadores.
```CSS
@font-face {
font-family: 'MyWebFont';
src: url('myfont.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
url('myfont.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}
```O segundo método que encontrei não resolve totalmente meu problema, mas torna a fonte exibida no computador Windows mais suave. Ele usa font-smoothing: antialiasedou font-smoothing: subpixel-antialiased;propriedade no seletor my @ font-face.
O que é “suavizado”
Há um ótimo artigo sobre renderização de fontes na Smashing Magazine . No artigo, o autor Tim Ahrens mencionou três estratégias de renderização na tela do computador: renderização em preto e branco, renderização em tons de cinza e renderização de subpixel.
Na renderização em tons de cinza, um pixel que está na borda da forma original torna-se cinza, seu brilho dependendo de quanto é coberto pela forma preta ideal …
Este princípio – também chamado de suavização – é o mesmo que é usado nas fotos são reamostrados para uma resolução inferior.
E assim, na propriedade de suavização de fonte, o anti-aliasamento é pedir ao navegador para usar a metodologia de renderização em tons de cinza para renderizar as fontes para torná-las mais suaves.
Assim, não surpreendentemente, o subpixel com suavização é o método de renderização de subpixel, que é a terceira geração de tecnologia de renderização. É caracterizado por pixels coloridos.
Os benefícios desta técnica ficam claros se dessaturarmos a imagem. Em comparação com a renderização em tons de cinza simples, a resolução triplicou na direção horizontal. A posição e o peso das hastes verticais podem ser refletidos com ainda mais precisão, e o texto se torna mais nítido.
janelas
Mas por que as fontes no Windows têm um desempenho diferente do MAC? E é porque quase todos os navegadores dependem de rasterizadores de sistema.
Ao observar a renderização de fontes da Web, a principal distinção que devemos fazer é o sistema operacional. No entanto, existem diferenças entre os navegadores em termos de suporte dado a kerning e ligaduras, bem como a aplicação da posição e espessura do sublinhado, por isso não podemos esperar uma renderização perfeitamente idêntica em todos os navegadores (mesmo em uma plataforma). Além do mais, no Windows, o navegador pode ter a fonte renderizada por qualquer uma das tecnologias de sistema – GDI ou DirectWrite.