Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS


Moderador: web

 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17415
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Como usar e para que serve o @font-face CSS

26-01-2016 21:02

O @font-face serve basicamente para que possamos usar alguma fonte ttf para ser mostradas em uma página da web, mesmo que o usuário não tenha ela instalada no computador. Claro que para isso precisamos colocar a fonte em um servidor http e puxar ela pelo endereço completo: http://....ttf

Um exemplo bem simples de uso do @font-face é esse

<style type="text/css"> @font-face { font-family: MinhaFonte; src: url(http://www.site.com/arquivo.ttf); } .div{ font-family: MinhaFonte; font-size: 26px; } </style> <div class="div">texto</div>

Como mostrado o @font-face "cria" uma nova fonte que é chamada logo após para definir o tipo de fonte a ser usado na div.

Um dos problemas é que o @font-face pode não funcionar em todos os navegadores, como o Internet Explorer.

Nesse caso é necessário especificar uma fonte alternativa, caso o navegador do usuário não reconheça a fonte ttf.

.div{ font-family: MinhaFonte, 'Times New Roman'; font-size: 26px; }

Como mostrado caso MinhaFonte não funciona será mostrado a fonte alternativa, Times New Roman. Que é uma fonte comum nos computadores, como Arial, Verdana entre outras.
0
Tem um script legal em HTML, CSS, PHP, HTML, JavaScript, jQuery? Poste e compartilhe com os usuários do fórum :rock:

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado