Como incorporar fontes em HTML?

StackOverflow https://stackoverflow.com/questions/220236

Pergunta

Eu estou tentando descobrir uma solução decente (especialmente do lado de SEO) para incorporação de fontes em páginas da web. noreferrer Até agora eu vi solução W3C, que nem sequer funciona no Firefox, e esta solução legal muito . A segunda solução é de apenas títulos. Existe uma solução disponível para texto completo? Estou cansado das fontes padrão para páginas da web.

Obrigado!

Foi útil?

Solução

As coisas mudaram uma vez que esta questão foi originalmente feitas e respondidas. Tem havido uma grande quantidade de trabalho realizado na obtenção de fontes cross-browser incorporação de texto do corpo para o trabalho usando @ incorporação font-face.

Paul Irish juntos sintaxe Bulletproof @ font-face combinando tentativas de várias outras pessoas. Se você realmente passar por todo o artigo (e não apenas a parte superior) que permite que um único @ declaração font-face para cobrir IE, Firefox, Safari, Opera, Chrome e possivelmente outros. Basicamente, este pode alimentar fora OTF, EOT, SVG e WOFF de maneiras que não quebram nada.

cortou de seu artigo: 

@font-face {
  font-family: 'Graublau Web';
  src: url('GraublauWeb.eot');
  src: local('Graublau Web Regular'), local('Graublau Web'),
    url("GraublauWeb.woff") format("woff"),
    url("GraublauWeb.otf") format("opentype"),
    url("GraublauWeb.svg#grablau") format("svg");
}

Trabalho a partir dessa base, Font Squirrel montar uma variedade de ferramentas úteis, incluindo o @ font-face Generator que lhe permite carregar um TTF ou arquivo OTF e obter auto- arquivos de fontes convertidas para outros tipos, juntamente com CSS pré-construídos e uma página de demonstração HTML. Font Squirrel também tem Centenas de @ kits font-face .

Soma projeto também unir o FontFriend Bookmarklet , que redefine fontes em uma página na mosca assim você pode experimentar as coisas. Ele inclui drag-and-drop @ apoio font-face no Firefox 3.6 +.

Mais recentemente, o Google começou a oferecer o Google Web Fonts , uma variedade de fontes disponíveis ao abrigo de um licença Open Source e serviu dos servidores do Google.

Restrições Licença

Finalmente, WebFonts.info montou um bom wiki'd lista de fontes disponíveis para incorporar @ font-face com base em licenças. Ele não pretende ser uma lista exaustiva, mas fontes em que deve estar disponível (possivelmente com condições tais como atribuição no arquivo CSS) para a incorporação / ligando. É importante ler as licenças , porque existem algumas limitações que não são empurrados para a frente, obviamente, sobre os downloads de fonte.

Outras dicas

Tente Facetype.js , você converter o seu. fonte TTF em um arquivo Javascript. Completa SEO compatível, suporta FF, IE6 e Safari e degrada graciosamente em outros navegadores.

Não, não é uma solução decente para o tipo de corpo, a menos que você está disposto a atender apenas àqueles com navegadores sangramento de ponta.

A Microsoft tem trama , a sua própria tecnologia de incorporação de fontes proprietárias, mas eu não tenho ouviu falado em anos, e eu sei que ninguém que usa-lo.

eu consigo com sIFR para o tipo de display (manchetes, títulos de posts, etc.) e usando uma das fontes web-safe menos desgastados para o tipo de corpo (como Trebuchet MS). Se você está entediado com todas as fontes web-safe, provavelmente você está definindo o termo demasiado estreita - olhada esta matriz de fontes que navio com os principais sistemas operacionais e as chances são que você vai ser capaz de encontrar uma cascata fonte que vai pegar quase todos usuários da web.

Por exemplo: font-family: "Lucida Grande", "Verdana", sans-serif é uma cascata fonte comum; OS X vem com Lucida Grande, mas aqueles com o Windows terá Verdana, uma fonte web-safe com letras de tamanho e forma semelhantes a Lucida Grande. Os usuários do Linux também terá Verdana se tiver instalado o pacote de fontes web-safe que existe em gerenciadores de pacotes A maioria das distribuições, ou então eles vão cair de volta para uma sans-serif comum.

E é pouco provável também - EOT é um formato bastante restritiva que é suportado apenas pelo IE. Ambos Safari 3.1 e Firefox 3.1 (bem o alfa atual) e, possivelmente, Opera 9.6 suporte True Type Font (TTF) a incorporação, e pelo menos Safari suporta fontes SVG através do mesmo mecanismo. A List Apart teve uma boa discussão sobre isso um tempo volta .

Confira Typekit , uma opção comercial (eles têm um pacote gratuito disponível também).

Ele usa técnicas diferentes dependendo de qual navegador está sendo usado (@font-face vs. formato EOT), e eles cuidam de todo o tipo de letra problemas de licenciamento para você também. Ele suporta tudo até ao IE6.

Aqui está mais algumas informações sobre como Typekit funciona:

Eu pedi este um tempo atrás . A resposta é, basicamente, que ele não funciona. : (

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top