Fontes na Web [duplicado]

Question

Essa pergunta já tem resposta aqui:

• Como incorporar fontes em HTML? 6 respostas

A coleção de fontes disponíveis para um desenvolvedor web é deprimentemente limitada.Lembro-me de ter lido há muito tempo sobre o TrueDoc, como uma forma de enviar fontes junto com um site - mas parece ter definhado.Alguém já usou isso ou algo semelhante?É suportado por navegadores suficientes?Estou faltando uma boa solução?

Observe que um desenvolvedor web responsável não usa fontes disponíveis apenas no Windows (e especialmente aqueles que estão disponíveis apenas no Vista), nem usam uma tecnologia que não seja suportada pelo menos pela maioria dos navegadores.

---

Atualizar: Como várias pessoas apontaram, não há nada de errado em fornecer uma lista de fontes substitutas para pessoas que não possuem a fonte específica que você usa.Na verdade, sempre faço isso e não tive a intenção de sugerir que isso fosse errado.

Embora minha pergunta tenha sido mal formulada, o que eu quis dizer foi que um designer não deve fazer muitas suposições sobre o que o cliente terá disponível.Você deve planejar como todos os usuários verão seu site, não apenas as pessoas que usam sua configuração preferida.

Answer 1

O Safari e, em menor grau, o Firefox 3 têm suporte para @font-face em CSS, que permite usar fontes personalizadas.Você precisa ter a licença apropriada para distribuir os arquivos de fontes.Estes artigos explicam isso com mais detalhes:

• http://www.css3.info/preview/web-fonts-with-font-face/
• http://www.alistapart.com/articles/cssatten
• http://www.sitepoint.com/blogs/2008/07/30/custom-web-fonts-pick-your-poison/

Answer 2

Este é um tópico oportuno;mudamos para Arial porque Calibri é MUITO pequeno em comparação com todas as outras fontes substitutas!Foi muito doloroso mudar para (gag) Arial porque é uma cópia ruim da Helvetica:

http://www.ms-studio.com/articles.html

As dificuldades de dimensionamento (muito grandes se você usar uma fonte "c" como padrão;muito pequeno se você optar por algo normal) são descritos em detalhes aqui:

http://neosmart.net/blog/2006/css-vistas-new-fonts/

Sentirei muita falta do belo alias RGB ajustado à mão do Calibri, mas era simplesmente impossível oferecer uma boa experiência para a maioria dos usuários sem exigir a instalação do Calibri.É razoavelmente comum, pois vem com o Office 2007 (Win/Mac) e, claro, com o Vista.mas está longe de ser universal, por isso é um pouco irresponsável confiar fortemente nele para um público global da web.

Answer 3

Claro que você pode usar SIFR.

Isso se degrada normalmente em navegadores que não o suportam e é acessível.

Não é muito adequado para usar em muito texto, mas para títulos e texto destacado é perfeito.

É claro que isso é uma solução alternativa para uma limitação intrínseca dos navegadores e da web no momento, mas quando isso não aconteceu com a maioria das tecnologias e técnicas da web.

Answer 4

Você pode fazer isso com o novo @font-face declaração disponível em CSS3.Tem um suporte muito bom para um recurso CSS3 (ou seja,desde o IE4) também.

A sintaxe geral é:

@font-face {
    src: url('caminho para sua fonte') format('woff|ttf|svg|eot|…');
    font-family: o nome a ser usado;
    font-weight: um peso opcional;
    font-style: um estilo opcional;
}

Há também um gerador disponível que converte a fonte em vários formatos e cria o CSS apropriado.

Hoje em dia, eu recomendaria fornecer apenas um arquivo WOFF;é conveniente, fácil de criar.

Além disso, certifique-se de citar o nome do formato (por exemplo, format('woff'));caso contrário, não funcionará no Firefox.

Answer 5

Observe que um desenvolvedor da Web responsável não usa fontes disponíveis apenas no Windows (e especialmente em que estão disponíveis apenas no Vista), nem usam uma tecnologia que não é suportada pelo menos a maioria dos navegadores.

Não há nada de errado ou incorreto em usar fontes específicas do Windows/Vista, desde que você opte por uma fonte amplamente disponível.Por exemplo:

font-family: Calibri, Tahoma, Helvetica, Sans-Serif;

Na verdade, esse é o ponto principal!

Answer 6

CSS2 oferece:

@font-face {
    font-family: Garamond;
    src: url(garamond.eot), url(garamond.pfr);
}

Answer 7

Observe que um desenvolvedor web responsável não usa fontes que estão disponíveis apenas no Windows (e especialmente aquelas que estão disponíveis apenas no Vista), nem usa uma tecnologia que não seja suportada pelo menos pela maioria dos navegadores.

Acho que isso está perdendo o foco.Não importaria se você fizesse;todos obteriam algo sensato que pudessem ler facilmente, e aqueles que precisassem poderiam alterar a fonte para o que quisessem, porque é apenas texto e todos os principais navegadores permitem que você personalize a fonte que vê, independentemente das preferências do designer do site.

Não há nada de errado em sugerir fontes em seu CSS que alguns usuários não possuem;eles apenas veem algo diferente de você.Diferente não está quebrado.Eles nem vão se perguntar por que você está usando fontes padrão, porque não saberão que outras pessoas veem algo diferente.

Este é o objetivo dos conjuntos de fontes:

Verdana, Arial, Helvetica, sans-serif

É uma boa prática precisamente porque reconhece que as pessoas verão coisas diferentes.

Esta também é uma boa prática:

Gill Sans, Verdana, Arial, Helvetica, sans-serif

Então a maioria das pessoas não tem Gill – quem se importa?Eles conseguem um site perfeitamente bom de qualquer maneira.

E isso também seria bom, mas um pouco estranho e preguiçoso:

Gill Sans

Web design irresponsável é fazer coisas como definir texto como imagens sem usar texto alternativo, não usar fontes interessantes em conjuntos de fontes.

Answer 8

IE suporta @font-face (começou como tecnologia proprietária no MS Word). Aqui está uma postagem no blog da equipe do IE sobre isso há cerca de um mês.

Answer 9

Observe que um desenvolvedor web responsável não usa fontes que estão disponíveis apenas no Windows (e especialmente aquelas que estão disponíveis apenas no Vista), nem usa uma tecnologia que não seja suportada pelo menos pela maioria dos navegadores.

Bem… Você pode, contanto que saiba como ele será renderizado em sistemas operacionais não Vista/não Windows.

De outra forma:sim, @font-face em CSS2 é a melhor alternativa padrão, mesmo que não seja amplamente suportada.

Answer 10

Imagino que qualquer método de envio de fontes com uma página da web representaria algum tipo de risco de segurança.Já ouvi falar de métodos em que, caso o cliente não possua a fonte necessária, o texto pode ser substituído dinamicamente por uma imagem ou algum tipo de flash exibido.O único assim que posso encontrar agora está em AListApart mas já pode ser redundante.Esse método também exigiria css, imagens e javascript para funcionar e poderia ser difícil de implementar em navegadores.