O @font CSS3 e transformações 3D

O impacto prático de um casal de recursos CSS3 ainda não está comprovada - o @fonte

propriedade (o que tem gerado burburinho considerável) e um conjunto emergente de transformações 3D.

Se você aplicar @fonte para fontes personalizadas, ou as transformações 3D, certifique-se de sua página funciona bem em ambientes de navegação que não suportam esses efeitos. E, não, porque isso é tão facilmente feito com @fonte ou transformações 3D, você pode querer esperar e ver como elas se desenvolvem.

O @font transformar em CSS3

O conceito por trás @fonte é que os desenvolvedores podem finalmente se libertar das restrições apertadas sobre o que as fontes podem ser utilizados em páginas da web por meio do upload fontes personalizadas que os usuários depois baixar para ver na página. Contudo, @fonte é algo de um conceito falho, e na medida em que tem potencial, a implementação não está no lugar para fazer este acessível para a maioria dos web designers. Aqui estão alguns dos problemas @fonte vem com:

• sistemas operacionais não têm essas fontes instaladas. Com uma resolução (em pontos por polegada) cerca de quatro vezes mais granulada (ou menos densa) do que a resolução de impressão, a web exige fontes que são relativamente simples. designers criativos explorar as ferramentas CSS para micro-ajuste a altura da fonte e espaçamento para criar tipo único e intrigante usando fontes padrão que já estão instalados na maioria dos computadores.

  Em outras palavras, em muitos casos, os designers podem usar CSS para criar fontes de vista original, sem recorrer a pedindo aos usuários para transferir uma fonte antes de uma página pode ser visualizado.

• Os visitantes têm para transferir uma fonte em seu sistema operacional antes de a fonte se aplica. Fazer isso tende a incitar avisos em navegadores e requer um processo que, com o tempo e complexidade, é mais provável de conduzir um visitante longe de um site do que fazê-la experiência de navegação mais positiva.

• Fontes personalizadas têm de ser comprados. Licenciamento de uso legal de fontes personalizadas envolve contratos de licenciamento bastante complexos, e os custos começam a várias centenas de dólares (para usar uma fonte personalizada em um único site).

• Suporte para @fonte está a emergir mais lentamente em dispositivos móveis do que é para ambientes de tela cheia. O sistema operacional móvel mais popular, Android, por exemplo, adotou suporte completo para @fonte na versão 4, mas muitos smartphones ainda correm em versões do Android 2 e 3.

Às vezes, fontes de disco podem ser apropriados. Por exemplo, se você é Keith Richards dos Rolling Stones, você pode usar um download fonte personalizada. Mas se o seu ambiente de navegação não consegue lidar com fontes descarregáveis, sua equipe de desenvolvedores criou scripts que detectam que o seu ambiente de navegação não suporta o download da fonte e fornecer uma imagem gráfica do tipo em seu lugar.

Com todas essas precauções, se você deseja instalar e aplicar fontes personalizadas, siga estes passos:

1. Comprar uma fonte ou encontrar um livre online.

   fontes como Fonts.com fornecer fontes descarregáveis, bem como ferramentas de instalação que ajudar a instalar, implementar e solucionar problemas de fontes personalizadas para download. Em muitos casos, o nº 147-passos # 148- pode acabar aqui - se você pode gastar na faixa de US $ 500 para um conjunto de fontes para download (conjuntos incluem opções como itálico, negrito, e assim por diante), esta é provavelmente uma boa opção.

2. Instalar a fonte.

   Se a fonte não vem com um pacote de instalação ou instruções, você pode instalá-lo salvando o TTF ou arquivo OTF para a pasta site.

3. Na parte superior do seu arquivo CSS externo, adicione este código:

   @ Font-face {font-family: xxx-src: url (yyy.ttf ') -}

   xxx é o nome que você vai usar em estilos para atribuir a fonte, e yyy é o nome do arquivo TTF (ou OTF) para o fontface você baixou.

4. Com o código anterior no topo do seu arquivo CSS, use o nome da fonte, como parte de definições de estilo.

   Por exemplo:

   h1 {font-family: Courier- yyy-}

   Courier é a fonte de backup que será exibido em navegadores que não suportam a sua fonte para download.

as transformações 3D

as transformações 3D pode girar um objeto em ambos os x-eixo (horizontal) ou y-eixo (vertical). Porque virar um objeto horizontalmente ou verticalmente tem implicações de design muito limitados, essas transformações têm a intenção de ser combinado com javascript ou outras ferramentas de animação e interatividade para fazer objetos virar e girar.

Ainda mais limitante é o âmbito restrito da suporte do browser para transformações 3D. Até o presente momento, somente navegadores construída no motor WebKit (Safari e algumas versões do Chrome) suporte 3D transforma.

Com essas ressalvas, aqui está um exemplo de aplicação de uma rotação de 180 vertical para um seletor de classe (.rotate_3d):

.rotate_3d {transform: rotateY (180 °) - webkit-transform: rotateY (180 °) -}