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.

Com meu limitado conjunto de habilidades com ferramentas como Photoshop e Illustrator, eu posso confessar honestamente que eu sou um desenvolvedor melhor do que eu sou um designer. Mas a minha experiência com o núcleo (do lado do servidor) com desenvolvimento Java / PHP / COBOL, tem sido uma influência muito positiva sobre as minhas habilidades de desenvolvimento de interface do usuário. O que quero dizer é, ao criar meus projetos, ou seja, sempre que eu faço design, eu penso sobre como o projeto pode ser melhor convertidos em HTML e CSS enquanto faz o HTML-CSS, eu dou um pensamento sobre a tecnologia back-end e fazer razoavelmente certo que o HTML pode ser facilmente implementado em XSL loops ou trechos PHP etc

Nos últimos anos, tenho jogado de cabeça para projetos de designers de interface do usuário, que provavelmente donot ter uma idéia do que é HTML ou CSS. Todos esses anos eu tenho pensado que eu iria pedir demais, Se eu apenas esperar que o designer, que está tentando shov seu "impossível código" projeto goela abaixo, para entender um pouco o seu projeto seria convertido em. Isso ajudaria certo?

Então, me deparei com este post de hoje ... Web designers que não pode codificar ... Senhor Obrigado! Eu sou apenas um dos muitos que sentem o mesmo ... O artitle acima é um pouco longo fôlego .. mas vale a pena ler, cada palavra dele.

Obrigado Stocks Elliot Jay ... eu me sinto aliviado!

Eis alguns trechos de artigo Elliots .

Uau, que dia! Tudo começou com um tweet pouco e terminou com uma discussão que parecia varrer toda a comunidade web design. Parece que há algumas opiniões muito fortes realizadas sobre o assunto de se os designers de web deve ser capaz de código.
...
Então, antes de chegar a este, permitam-me recapitular rapidamente o que eu disse nesta manhã no Twitter:

Honestamente, eu estou chocado que em 2010 eu ainda estou vindo através dos web designers 'que não pode codificar seus próprios desenhos. Não há desculpa.

... Eu deveria ter sido um pouco mais específico na minha tweet. Eu estava falando sobre designers que não têm mesmo o mais básico de HTML e CSS habilidades para transformar um projeto simples em um site real. Não pessoas que intencionalmente não optam por código, aqueles que não podem. E eu também estou referindo apenas front-end código aqui, claro que é ridículo pensar que os designers devem também ser surpreendentes back-end programadores ...

Ficamos com 'web' projetos enviados em Illustrator, 300dpi, impossíveis de código, sem consistência / usabilidade.
~ Amy Mahon

Está ficando tarde, e eu tenho que acabar isto de alguma forma. Eu sei que haverá muitos que discordam de mim, e minha intenção não é ofender ou perturbar qualquer um que não pode codificar, mas espero que algumas das coisas que eu disse reflecte alguns dos pontos que sempre surgem quando se aprofundar este debate.

No final do dia, eu não perco o sono por causa que pode codificar e quem não pode. Eu sou apenas genuinamente surpreso ao encontrar tantos designers que carecem de front-end habilidades, como eu achava que isso era uma coisa do passado.

Leia também os comentários, havia cerca de 320 comentários, como eu escrevo ... que valem a pena uma leitura.
Por favor, leia Elliots post completo aqui .. Web designers que não pode codificar

Uma vez que o botão de rádio eo texto são in-line, de modo que o texto será alinhar-se para a parte inferior do botão de rádio, o texto a aparecerá a ser ligeiramente por baixo do botão de rádio.
Se você quer estes para alinhar ao topo, você vai ter que colocar o rádio eo texto em recipientes separados, como divs ou spans (conforme apropriado) e eles vão cuidar do alinhamento. Seria mais fácil de usar células da tabela, também, do seu projecto de design permite.

Isso não vai ser o mesmo em todos os navegadores, como todo navegador exibe rádios de forma ligeiramente diferente, por isso há sempre vai haver problemas de tamanho, não importa o que você faz.