Olá Convidado, bom, esse tutorial não é meu, estava na PFF procurando alguns tutoriais de HTML e CSS e achei um do Example, que eu admiro assim como o Je4n, e decidi postar aqui, porque eu não vi nenhum tutorial sobre isso, acho que todos sabem mas vamos lá, deve ter alguém que não saiba fazer.
Fonte utilizada no tutorial: OpenSans Light, [Tens de ter uma conta e sessão iniciada para poderes visualizar este link] para baixar.
Crie sua div e CSS.
HTML:
CSS:
O CSS para adicionar a fonte é:
3 - Antes e depois:
Antes:
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Depois:
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
HTML Pronto:
Créditos a; Example por disponibilizar o tutorial.
Fonte utilizada no tutorial: OpenSans Light, [Tens de ter uma conta e sessão iniciada para poderes visualizar este link] para baixar.
Crie sua div e CSS.
HTML:
- Código:
<div class="tutorialfonte">TEXTO DE TESTE</div>
CSS:
- Código:
@font-face {
font-family: OpenSans;
font-style: normal;
font-weight: normal;
src: url(http://www.maniateenfm.com.br/ppf/OpenSans-Light.ttf);
}
.tutorialfonte {
font-family: OpenSans;
}
O CSS para adicionar a fonte é:
- Código:
@font-face {
font-family: (NOME DA FONTE);
font-style: normal;
font-weight: normal;
src: url(LINK DA FONTE);
}
.tutorialfonte {
font-family: NOME DA FONTE;
}
3 - Antes e depois:
Antes:
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Depois:
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
HTML Pronto:
- Código:
<html>
<head>
<title>SEU TITULO</title>
<meta charset="windows-1252">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css.css" rel="stylesheet" type="text/css">
</head>
<style type="text/css">
@font-face {
font-family: OpenSans;
font-style: normal;
font-weight: normal[size=11][/size]
src: url(http://www.maniateenfm.com.br/ppf/OpenSans-Light.ttf);
}
.tutorialfonte {
font-size: 50px;
font-family: OpenSans;
}
</style>
<body>
<div class="tutorialfonte">Texto de textes</div>
</body>
</html>
Créditos a; Example por disponibilizar o tutorial.
Última edição por AndréGama em Dom Mar 01, 2015 5:53 pm, editado 1 vez(es) (Motivo da edição : Correção do HTML e CSS - BBCodes pelo código.)