A font-sizepropriedade define o tamanho do texto.
Ser capaz de gerenciar o tamanho do texto é importante no design da web. No entanto, você não deve usar ajustes de tamanho da fonte para fazer com que os parágrafos se pareçam com títulos, ou se os títulos se pareçam com parágrafos.
Sempre use as tags HTML apropriadas, como <h1> – <h6> para títulos e <p> para parágrafos.
O valor do tamanho da fonte pode ser um tamanho absoluto ou relativo.
Tamanho absoluto:
Define o texto para um tamanho especificado
Não permite que um usuário altere o tamanho do texto em todos os navegadores (inválido por razões de acessibilidade)
O tamanho absoluto é útil quando o tamanho físico da saída é conhecido
Tamanho relativo:
Define o tamanho em relação aos elementos circundantes
Permite que um usuário altere o tamanho do texto nos navegadores
Nota: Se você não especificar um tamanho de fonte, o tamanho padrão para o texto normal, como parágrafos, é 16 px (16 px = 1em).
Definir tamanho da fonte com pixels
A configuração do tamanho do texto com pixels oferece controle total sobre o tamanho do texto:
Exemplo
h1 {
font-size: 40px;
}
h2 {
font-size: 30px;
}
p {
font-size: 14px;
}
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
font-size: 40px;
}
h2 {
font-size: 30px;
}
p {
font-size: 14px;
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
Dica: Se você usar pixels, ainda poderá usar a ferramenta de zoom para redimensionar a página inteira.
Definir tamanho da fonte com Em
Para permitir que os usuários redimensionem o texto (no menu do navegador), muitos desenvolvedores usam em vez de pixels.
1em é igual ao tamanho da fonte atual. O tamanho do texto padrão nos navegadores é 16 px. Portanto, o tamanho padrão de 1em é 16px.
O tamanho pode ser calculado de pixels para em usando esta fórmula: pixels / 16 = em
Exemplo
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 */
}
<!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>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>Specifying the font-size in em allows all major browsers to resize the text.
Unfortunately, there is still a problem with older versions of IE. When resizing the text, it becomes larger/smaller than it should.</p>
</body>
</html>
No exemplo acima, o tamanho do texto em é igual ao exemplo anterior em pixels. No entanto, com o tamanho em, é possível ajustar o tamanho do texto em todos os navegadores.
Infelizmente, ainda há um problema com versões mais antigas do Internet Explorer. O texto se torna maior do que deveria quando aumentado e menor do que deveria quando diminuído.
Use uma combinação de porcentagem e Em
A solução que funciona em todos os navegadores é definir um tamanho de fonte padrão em porcentagem para o elemento <body>:
Exemplo
body {
font-size: 100%;
}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 1.875em;
}
p {
font-size: 0.875em;
}
<!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>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>Specifying the font-size in percent and em displays the same size in all major browsers, and allows all browsers to resize the text!</p>
</body>
</html>
Nosso código agora funciona muito bem! Ele mostra o mesmo tamanho de texto em todos os navegadores e permite que todos os navegadores aumentem ou redimensionem o texto!
Tamanho da fonte responsivo
O tamanho do texto pode ser definido com uma vw unidade, o que significa “largura da janela de exibição”.
Dessa forma, o tamanho do texto seguirá o tamanho da janela do navegador:
<!DOCTYPE html> <html> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <body> <h1 style="font-size:10vw;">Responsive Text</h1> <p style="font-size:5vw;">Resize the browser window to see how the text size scales.</p> <p style="font-size:5vw;">Use the "vw" unit when sizing the text. 10vw will set the size to 10% of the viewport width.</p> <p>Viewport is the browser window size. 1vw = 1% of viewport width. If the viewport is 50cm wide, 1vw is 0.5cm.</p> </body> </html>
<< Anterior Fontes CSS – Estilo da fonte CSS
Deixe um comentário