Warning: Parameter 1 to wp_default_scripts() expected to be a reference, value given in /home/crian734/public_html/blog.kolaborativa/wp-includes/plugin.php on line 601

Warning: Parameter 1 to wp_default_styles() expected to be a reference, value given in /home/crian734/public_html/blog.kolaborativa/wp-includes/plugin.php on line 601
Efeitos de Texto – Parte 3: @font-face - Kolaborativa

Efeitos de Texto – Parte 3: @font-face

@font-face (Fontes Web)

Embora a propriedade @fonte-face não seja classificada como “efeitos de texto”, nós trataremos sobre ela aqui. A propriedade @font-face é simplesmente uma maneira de usar qualquer fonte na sua página, permite que usemos famílias de fontes que não estão instaladas no computador do usuário, sendo baixadas automaticamente pelo navegador o que é uma revolução na web.

Veja abaixo a sintaxe:

Na primeira linha você dá um nome para a fonte que você está importando. Pode ser qualquer nome.
Na segunda linha, você inclue o endereço de onde a fonte se encontra. Para facilitar, crie uma pasta fonte dentro da pasta onde está o CSS.

Feito isso, agora você a utiliza como qualquer outra fonte:

Mas podemos fazer tentativas de achar fontes locais, e caso elas não existirem, fazemos o download da nossa fonte. Fazemos isso para que o site carregue mais rápido, utilizando a cópia local do sistema do usuário caso ele a tenha instalado:

O valor local() faz com que o navegador procure a fonte no computador do usuário antes de executar o download da fonte que está no servidor:

Agora podemos ver um exemplo prático. Primeiro a propriedade @font-face sendo aplicada:

Depois determinando a fonte que importamos:


Imagens Nunca Mais!


Mais Exemplos:


Uma Revolução na Web!



Uma novidade na Web!


adeus as imagens


Seus problemas acabaram!


Fonte Maneira!



Funciona no: navegadoresnavegadoresnavegadoresnavegadoresnavegadores


FONTES DIVERSAS, PORÉM MUITAS INFORMAÇÕES FORAM TIRADAS DE SITES COMO HTTP://WWW.KREMALICIOUS.COM


Author Description

dodilei

Dizem que falo comendo as palavras, mas o que gosto de comer é um bom paniqueijo! além de OpenSource, Linux, Python e Javascript! :D

There are 4 comments. Add yours

  1. 27th setembro 2010 | Danilo Ramos says: Responder
    Olá Gustavo, muito boa essa iniciativa de ensinar CSS3 pra galera ! Sou web designer e sou fascinado por CSS e HTML, também estou nesse novo mundo do CSS3. Tenho um bog sobre CSS e XHTML é o CSS Orbit (cssorbit.blogspot.com). Parabens Abraço !
  2. 2nd julho 2011 | Fer says: Responder
    Mas como saber o endereço da fonte local?
  3. 2nd julho 2011 | Fer says: Responder
    Pode ser que alguem me ache burro, mas como to começando... Vou perguntar: Mas como saber o endereço da fonte local?
    • 19th agosto 2011 | Dodilei says: Responder
      pra saber o endereço Fer é necessário ele estar hospedado em algum servidor na internet... vc vai precisar enviar sua fonte para uma hospedagem...

Join the Conversation