A propriedade CSS Font é usada para controlar a aparência dos textos. Ao usar a propriedade de fonte CSS, você pode alterar o tamanho, a cor, o estilo do texto e muito mais. Você já estudou como deixar o texto em negrito ou sublinhado. Aqui você também saberá como redimensionar sua fonte usando porcentagem.
string substitui tudo java
Estes são alguns atributos de fonte importantes:
1) Cor da fonte CSS
A cor da fonte CSS é um atributo independente em CSS, embora pareça fazer parte das fontes CSS. É usado para alterar a cor do texto.
Existem três formatos diferentes para definir uma cor:
- Por um nome de cor
- Por valor hexadecimal
- Por RGB
No exemplo acima, definimos todos esses formatos.
body { font-size: 100%; } h1 { color: red; } h2 { color: #9000A1; } p { color:rgb(0, 220, 98); } } <h2>This heading is shown in serif.</h2> <p>This paragraph is written in monospace.</p> Teste agora Saída:
<h2>This heading is shown in sans-serif.</h2> <h3>This heading is shown in serif.</h3> <p>This paragraph is written in monospace.</p>
3) Tamanho da fonte CSS
A propriedade CSS font size é usada para alterar o tamanho da fonte.
Estes são os valores possíveis que podem ser usados para definir o tamanho da fonte:
| Valor do tamanho da fonte | Descrição |
|---|---|
| xx-pequeno | usado para exibir o tamanho de texto extremamente pequeno. |
| extra pequeno | usado para exibir o tamanho de texto extra pequeno. |
| pequeno | usado para exibir tamanho de texto pequeno. |
| médio | usado para exibir tamanho de texto médio. |
| grande | usado para exibir tamanho de texto grande. |
| extra grande | usado para exibir tamanho de texto extra grande. |
| xx-grande | usado para exibir tamanho de texto extremamente grande. |
| menor | usado para exibir um tamanho de texto comparativamente menor. |
| maior | usado para exibir um tamanho de texto comparativamente maior. |
| tamanho em pixels ou% | usado para definir o valor em porcentagem ou em pixels. |
Practice CSS font-size property <p> This font size is extremely small.</p> <p> This font size is extra small</p> <p> This font size is small</p> <p> This font size is medium. </p> <p> This font size is large. </p> <p> This font size is extra large. </p> <p> This font size is extremely large. </p> <p> This font size is smaller. </p> <p> This font size is larger. </p> <p> This font size is set on 200%. </p> <p> This font size is 20 pixels. </p>Teste agora
Saída:
Este tamanho de fonte é extremamente pequeno.
Este tamanho de fonte é extra pequeno
Este tamanho de fonte é pequeno
Este tamanho de fonte é médio.
Este tamanho de fonte é grande.
Este tamanho de fonte é extra grande.
Este tamanho de fonte é extremamente grande.
Este tamanho de fonte é menor.
Este tamanho de fonte é maior.
Este tamanho de fonte está definido em 200%.
Este tamanho de fonte é de 20 pixels.
4) Estilo de fonte CSS
A propriedade CSS Font style define que tipo de fonte você deseja exibir. Pode ser itálico, oblíquo ou normal.
body { font-size: 100%; } h2 { font-style: italic; } h3 { font-style: oblique; } h4 { font-style: normal; } } <h2>This heading is shown in italic font.</h2> <h3>This heading is shown in oblique font.</h3> <h4>This heading is shown in normal font.</h4> Teste agora Saída:
<h2>This heading is shown in italic font.</h2> <h3>This heading is shown in oblique font.</h3> <h4>This heading is shown in normal font.</h4>
5) Variante de fonte CSS
A propriedade variante da fonte CSS especifica como definir a variante da fonte de um elemento. Pode ser normal e em letras maiúsculas.
p { font-variant: small-caps; } h3 { font-variant: normal; } <h3>This heading is shown in normal font.</h3> <p>This paragraph is shown in small font.</p> Teste agora Saída:
<h3>This heading is shown in normal font.</h3> <p>This paragraph is shown in small font.</p>
6) Peso da fonte CSS
A propriedade de peso da fonte CSS define o peso da fonte e especifica o quão ousada a fonte é. Os possíveis valores de espessura da fonte podem ser normal, negrito, mais negrito, mais claro ou numérico (100, 200..... até 900).
Esta fonte está em negrito.
Esta fonte é mais ousada.
Esta fonte é mais clara.
Esta fonte tem peso 100.
Esta fonte tem peso 200.
Esta fonte tem peso 300.
Esta fonte tem peso 400.
Esta fonte tem peso 500.
Esta fonte tem peso 600.
Esta fonte tem peso 700.
Esta fonte tem peso 800.
Esta fonte tem peso 900.
Teste agoraSaída:
Esta fonte está em negrito.
Esta fonte é mais ousada.
Esta fonte é mais clara.
Esta fonte tem peso 100.
Esta fonte tem peso 200.
Esta fonte tem peso 300.
Esta fonte tem peso 400.
Esta fonte tem peso 500.
Esta fonte tem peso 600.
Esta fonte tem peso 700.
Esta fonte tem peso 800.
Esta fonte tem peso 900.