CSS Tamanho da Fonte
A font-size
é a propriedade que define tamanho do texto.
Tamanho da Fonte
em pixels
Tamanho em pixels tenho controle total do tamanho do texto.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
font-size: 50px;
}
h2 {
font-size: 40px;
}
p {
font-size: 20px;
}
</style>
</head>
<body>
<h1> Primeiro título. </h1>
<h2>Segundo título. </h2>
<p>Estamos iniciando o primeiro paragráfo.</p>
<p>Estamos iniciando o segundo paragráfo</p>
</body>
</html>
Tamanho da Fonte
Em
Para permitir que os
usuários redimensionem o texto
1EM = 16px Fórmula é pixels /16= em
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
font-size: 2.5em; /*
40px/16=2.5em */
}
h2 {
font-size: 1.875em; /*
30px/16=1.875em */
}
p {
font-size: 0.875em; /*
14px/16=0.875em */
}
</style>
</head>
<body>
<h1>Título 1 </h1>
<h2>Título 2 </h2>
<p>Primeiro paragráfo.</p>
<p>Estamos construídos a primeira página da web. </p>
</body>
</html>
Combinação de porcentagem e Em
Funciona como padrão para todos os navegadores usado porcentagem no
<body>
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-size: 100%;
}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 1.875em;
}
p {
font-size: 0.875em;
}
</style>
</head>
<body>
<h1>Título 1. </h1>
<h2>Título 2. </h2>
<p>Primeiro paragráfo. </p>
<p>Especificar o tamanho da fonte em porcentagem e em exibe
o mesmo tamanho em todos os principais navegadores e permite que todos os
navegadores redimensionem o texto!!</p>
</body>
</html>
fonte responsiva
Viewport é o tamanho da
janela do navegador. 1vw = 1% da largura da janela de visualização.
<!DOCTYPE html>
<html>
<meta
name="viewport" content="width=device-width,
initial-scale=1.0">
<body>
<h1
style="font-size:10vw;">Texto Responsivo</h1>
<p
style="font-size:5vw;">Redimensione a janela do navegador para ver
como o tamanho do texto é dimensionado.</p>
<p
style="font-size:5vw;">Use a unidade "vw" ao dimensionar
o texto. 10vw definirá o tamanho para 10% da largura da janela de
visualização.</p>
<p>Viewport é o
tamanho da janela do navegador. 1vw = 1% da largura da janela de visualização.
Se a janela de visualização tiver 50 cm de largura, 1vw é 0,5 cm</p>
</body>
</html>