Expressá-la

CSS completou 10 anos existência este ano! Aqueles que estiveram ao redor por um tempo, ganhando o seu pão (ou não) usando o CSS, então você pode consciência de como temos fome de uma boa selecção de fontes. Mesmo com a falta de fontes designers como aqueles em CSS Zen Garden fizeram uso de imagens de fundo CSS para substituir fontes na busca de fazer alguma justiça a seus projetos. Nós também tentamos Flash / JavaScript ® hacks para atingir os objetivos de nosso projeto. De maneira nenhuma este é um caminho errado para obter as fontes que desejamos em nossos projetos de web, mas definitivamente, não é a forma mais desejável. e ao longo dos anos web designer, como eu, totalmente contou com dez ou mais fontes para seus projetos.

Desenvolvimentos recentes na web standards e formatos de letra tornam possível processar texto HTML em caracteres tipográficos que não sejam as mesmas fontes padrão antigo. Vem no "@ fontface" decleration CSS.

@ Fontface provids uma solução para link para o arquivo fonte real e recuperá-la na web. Usando @ fontface, os designers podem usar fontes sem ter que congelar o texto como imagens de fundo. A aplicação é muito simples, como mostrado abaixo, mas como todas as coisas boas têm um papel CON-lo, nem todos os navegadores suportam um "tipo de fonte" única. Se você estiver planejando usar fontface @ no site com necessidade de suporte cross-browser, então você terá que fornecer fontes para vários tipos de font-o mesmo.

1. TrueType - Um formato projetado para ficar bem na tela. Recomendado especialmente para o Windows navegadores (Chrome).
2. OpenType (CFF) - Este formato é melhor para o trabalho de impressão e nem sempre ficam bem em Windows.
3. EOT - Você precisa desse formato se você deseja direcionar o Internet Explorer. IE não vai usar qualquer outro formato. Nosso EOT seriam considerados "Lite", já que não são nem comprimida nem o domínio restrito.
4. SVG - Este é um formato XML suportada por alguns navegadores, incluindo o iPhone.
5. WOFF - Este cross-browser, web-somente o formato da fonte é leve (dados da fonte é compactado) e pode ser compilado com TrueType ou PostScript (CFF) descreve. Hoje é suportado pelo Firefox 3.6 +.

Usando @ fontface

  @ Font-face {
 font-family: "CalligraphyFLFRegular ';
 src: url ('CalligraphyFLF.eot');
 src: local ("CalligraphyFLF '), local (' CalligraphyFLF '), formato de url (' CalligraphyFLF.woff") ("WOFF '), url (' CalligraphyFLF.ttf ') formato (' truetype '), url (' CalligraphyFLF . svg # CalligraphyFLF ') formato (' svg ');
 }
 @ Font-face {
   font-family: "O tipo de letra";
   src: url ("fonts / font_filename.eot");
   src: local ("nome alternativo"), local ("Alternatename"),
     formato de url ("fonts / font_filename.woff") ("WOFF"),
     formato de url ("fonts / font_filename.otf") ("OpenType"),
     formato de url ("fonts / font_filename.svg # font_filename") ("svg");
   }
 h2 {font-family: "O tipo de letra", Georgia, serif;} 

Como você pode ver no exemplo acima, para incluir o tipo de letra escolhido, tem de se vincular a um conjunto de fonttypes para o mesmo tipo de letra. Daí as pessoas se referem a ele como "Kit Fonte".
Há Kits de fonte disponíveis que explicitamente permite a ligação com o @ propriedade CSS font-face-to-lo sob End User License Agreement (EULA).

Recursos úteis WebFont:

• Fontes disponíveis para @ font-face-embedding página wiki em http://webfonts.info/wiki/index.php?title=Main_Page
  
• Ray Larabie . Ele é um designer de renome fonte que fez centenas de interessantes fontes TrueType disponíveis gratuitamente para uso na web. Suas fontes são elegantes, decorativo, e brincalhão.
• Dieter Steffmann é outra grande fonte de designer. Ele também fez muitas fontes bonitas disponíveis para qualquer um usar.
• Loja Fonte : oferece fontes projetadas especificamente para uso na web. Mais de 30 das famílias FontFont mais bem-sucedidos estão agora disponíveis como FontFonts web. FontShop tem também um detalhado guia do usuário WebFont http://www.fontshop.com/blog/newsletters/pdf/webfontfontuserguide.pdf
  
• Esquilo Fonte : Vitrinas todas as fontes que Squirrel Font oferece para uso com a incorporação CSS @ font-face. Esquilo Font oferece uma quantidade impressionante de tipo, faz com que seja muito simples de escolher um para fora, e com folga oferece "kits" - a fonte de sua escolha, em diversos formatos, embalados com demo HTML & CSS que usa muito atual sintaxe @ font-face . Eles também oferecem uma maneira de fazer suas próprias @ font-face kits . Se o tipo de letra que pretende utilizar foi licenciado de forma adequada (os que vêm com o computador não são necessariamente bem), o gerador produz EOT, SVG, e hey! WOFF arquivos.