Como faço para que as fontes sejam renderizadas da mesma maneira em diferentes navegadores da web?

Estou construindo um site para um cliente e esperávamos usar texto sem formatação, não imagens na barra de navegação. A fonte que estamos usando é Century Gothic (acredito que essa fonte esteja disponível na maioria dos PCs e Macs). O problema é que, em navegadores diferentes, a fonte é significativamente diferente. No Chrome, temos a aparência que queremos, mas no Firefox o texto é menor e mais ousado.

Além de escrever o javascript específico do navegador para alterar as propriedades da fonte, existem outras opções para padronizar a maneira como as fontes são renderizadas no navegador. Talvez alguma biblioteca ou API? Talvez seja uma questão de ser mais específico na declaração de propriedades da fonte? Honestamente, estou preso e preciso de ajuda.

website-design fonts cross-browser

— Zach Lysobey
fonte

Respostas:

Você não terá fontes e outras coisas para renderizar de forma idêntica nos navegadores. O manuseio de fontes é um exemplo perfeito. Eu sei que o Safari no Windows gosta de deixar o texto em negrito por algum motivo. Infelizmente, é assim que a web funciona. A variedade de navegadores, sistemas operacionais, monitores, processadores gráficos etc. significa que há potencialmente milhares ou dezenas de milhares de maneiras diferentes pelas quais uma pessoa pode visualizar uma página da web. Portanto, ao criar para o wbe, você precisa fazê-lo sabendo e esperando que seu site não seja perfeito para todos. Isso não é impresso. É a web selvagem selvagem.

— John Conde
fonte

Sim, parece que essa é a realidade infeliz. Parece, no entanto, que alguém deveria escrever um pedaço de javaScript que tornaria as coisas um pouco mais próximas da normalização.

— precisa saber é o seguinte

Infelizmente, não é um problema de código, mas um problema de software e hardware. É como os navegadores são desenvolvidos e, com a aceleração do hardware, as coisas pioram (embora suas fontes pareçam mais suaves para quem as habilitou).

— John Conde

Este artigo (e os outros da mesma série) explica os problemas em detalhes, caso você esteja curioso. blog.typekit.com/2010/12/17/…

— paulmorriss 03/03

Selecionou sua resposta como melhor. Você diz que não é um problema de código, mas certamente alguém poderia escrever um código para que uma única linha de texto seja esticada até uma largura mínima em pixels. Isso por si só melhoraria bastante essa situação. Poderia testar a largura <p> renderizada e aumentar o espaçamento das letras de acordo. Talvez?

— Zach Lysobey

@Zach - Você pode superar muitos obstáculos com algum planejamento e codificação inteligente, com certeza. Mas no final, podemos ter apenas tanto controle. Basicamente, se você pode aceitar problemas como o Safari no Windows e codificar o resto, deve fazê-lo.

— John Conde

Na verdade, existe um método de incorporar fontes no seu CSS. É extremamente fácil. Consulte http://randsco.com/index.php/2009/07/04/p680 para obter mais informações sobre como fazer isso. A desvantagem disso é que navegadores mais antigos (pre ei 7 e ff 3 eu acho ...) não suportam isso. Mas o número de pessoas que usam esses navegadores antigos está diminuindo rapidamente e ainda é possível especificar fontes alternativas que funcionariam e geralmente estão na maioria dos computadores, apenas por precaução.

Outra abordagem que eu não usei envolve o uso de flash. Eu não tenho muita informação sobre isso além de saber disso.

— Kenneth
fonte

Na nota css, certifique-se de usar apenas fontes que você não violará direitos autorais se essa fonte for usada por outra pessoa, como quando você usa o método css, esse arquivo de fonte está disponível para todos os que podem acessar seu site.

— Kenneth

Esse método Flash é chamado sIFR . É tem seus prós e contras também.

— John Conde

Como foi mencionado na outra resposta, mesmo usando essa abordagem, haverá pequenas diferenças entre navegadores e sistemas, mas há coisas que você pode fazer com o restante do design do site que podem compensar e tornar o site renderizado em todas as configurações diferentes. Uma coisa importante é ter vários navegadores e, de preferência, sistemas operacionais para testar seus sites.

— Kenneth

Como outros já observaram, não temos controle total. Mas acho que vale a pena mencionar algumas coisas que considero úteis para que os navegadores processem as coisas de maneira semelhante em geral. Ambas são coisas "de volta ao básico" que muitos de vocês já estão fazendo, mas achei que vale a pena mencionar, já que a base sobre a qual você constrói frequentemente o prepara para o sucesso ou o fracasso ...

Redefinição de CSS. O conceito é simples: você define os padrões da tag HTML em uma folha de estilo para definir um ponto de partida comum para a renderização HTML. Aqui está um artigo e exemplo: http://meyerweb.com/eric/tools/css/reset/

Declaração de tipo de documento. http://htmlhelp.com/tools/validator/doctype.html

— ph33nyx
fonte