Propriedades de CSS Relacionadas a Fontes

Articles

Este artigo explica propriedades CSS relacionadas a fontes.

Você pode aprender sobre os casos de uso e como escrever propriedades como font-style e font-family.

YouTube Video

Criando HTML para visualização

css-font.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-font.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>Font-Related CSS Properties Example</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Typography (Font-Related)</h2>
 20        </header>
 21        <article>
 22            <h3>font-size</h3>
 23            <section>
 24                <h4>Absolute Values</h4>
 25                <header><h4>font-size: 16px</h4></header>
 26                <section class="sample-view">
 27                    <p class="font-size-px">Font size: 16px</p>
 28                </section>
 29                <header><h4>font-size: 12pt</h4></header>
 30                <section class="sample-view">
 31                    <p class="font-size-pt">Font size: 12pt</p>
 32                </section>
 33            </section>
 34            <section>
 35                <h4>Relative Values</h4>
 36                <header><h4>font-size: 1.2em</h4></header>
 37                <section class="sample-view">
 38                    <p class="font-size-em">Font size: 1.2em</p>
 39                </section>
 40                <header><h4>font-size: 1.5rem</h4></header>
 41                <section class="sample-view">
 42                    <p class="font-size-rem">Font size: 1.5rem</p>
 43                </section>
 44                <header><h4>font-size: 150%</h4></header>
 45                <section class="sample-view">
 46                    <p class="font-size-percent">Font size: 150%</p>
 47                </section>
 48            </section>
 49            <section>
 50                <h4>Keywords</h4>
 51                <header><h4>font-size: small</h4></header>
 52                <section class="sample-view">
 53                    <p class="font-size-small">Font size: small</p>
 54                </section>
 55                <header><h4>font-size: medium%</h4></header>
 56                <section class="sample-view">
 57                    <p class="font-size-medium">Font size: medium (default)</p>
 58                </section>
 59                <header><h4>font-size: large</h4></header>
 60                <section class="sample-view">
 61                    <p class="font-size-large">Font size: large</p>
 62                </section>
 63                <header><h4>font-size: x-large</h4></header>
 64                <section class="sample-view">
 65                    <p class="font-size-x-large">Font size: x-large</p>
 66                </section>
 67            </section>
 68            <section>
 69                <h4>Relative Keywords</h4>
 70                <header><h4>font-size: smaller</h4></header>
 71                <section class="sample-view">
 72                    <p class="font-size-smaller">Font size: smaller</p>
 73                </section>
 74                <header><h4>font-size: larger</h4></header>
 75                <section class="sample-view">
 76                    <p class="font-size-larger">Font size: larger</p>
 77                </section>
 78            </section>
 79        </article>
 80        <article>
 81            <h3>font-family</h3>
 82            <section>
 83                <h4>Specific Font Names</h4>
 84                <header><h4>font-family: Arial, sans-serif</h4></header>
 85                <section class="sample-view">
 86                    <p class="font-family-arial">Font Family Arial</p>
 87                </section>
 88                <header><h4>font-family: Verdana, sans-serif</h4></header>
 89                <section class="sample-view">
 90                    <p class="font-family-verdana">Font Family Verdana</p>
 91                </section>
 92                <header><h4>font-family: "Times New Roman", serif</h4></header>
 93                <section class="sample-view">
 94                    <p class="font-family-times">Font Family Times New Roman</p>
 95                </section>
 96                <header><h4>font-family: "Courier New", monospace</h4></header>
 97                <section class="sample-view">
 98                    <p class="font-family-courier">Font Family Courier New</p>
 99                </section>
100                <header><h4>font-family: Georgia, serif</h4></header>
101                <section class="sample-view">
102                    <p class="font-family-georgia">Font Family Georgia</p>
103                </section>
104            </section>
105            <section>
106                <h4>Generic Font Families</h4>
107                <header><h4>font-family: serif</h4></header>
108                <section class="sample-view">
109                    <p class="font-family-serif">Font Family Serif</p>
110                </section>
111                <header><h4>font-family: sans-serif</h4></header>
112                <section class="sample-view">
113                    <p class="font-family-sans-serif">Font Family Sans-Serif</p>
114                </section>
115                <header><h4>font-family: monospace</h4></header>
116                <section class="sample-view">
117                    <p class="font-family-monospace">Font Family Monospace</p>
118                </section>
119                <header><h4>font-family: cursive</h4></header>
120                <section class="sample-view">
121                    <p class="font-family-cursive">Font Family Cursive</p>
122                </section>
123                <header><h4>font-family: fantasy</h4></header>
124                <section class="sample-view">
125                    <p class="font-family-fantasy">Font Family Fantasy</p>
126                </section>
127            </section>
128        </article>
129        <article>
130            <h3>font-weight</h3>
131            <section>
132                <h4>Keyword Values</h4>
133                <header><h4>font-weight: normal</h4></header>
134                <section class="sample-view">
135                    <p class="font-weight-normal">Font weight: normal</p>
136                </section>
137                <header><h4>font-weight: bold</h4></header>
138                <section class="sample-view">
139                    <p class="font-weight-bold">Font weight: bold</p>
140                </section>
141                <header><h4>font-weight: bolder</h4></header>
142                <section class="sample-view">
143                    <p class="font-weight-bolder">Font weight: bolder</p>
144                </section>
145                <header><h4>font-weight: lighter</h4></header>
146                <section class="sample-view">
147                    <p class="font-weight-lighter">Font weight: lighter</p>
148                </section>
149            </section>
150            <section>
151                <h4>Numeric Values</h4>
152                <header><h4>font-weight: 100</h4></header>
153                <section class="sample-view">
154                    <p class="font-weight-100">Font weight: 100 (Thin)</p>
155                </section>
156                <header><h4>font-weight: 200</h4></header>
157                <section class="sample-view">
158                    <p class="font-weight-200">Font weight: 200 (Extra Light)</p>
159                </section>
160                <header><h4>font-weight: 300</h4></header>
161                <section class="sample-view">
162                    <p class="font-weight-300">Font weight: 300 (Light)</p>
163                </section>
164                <header><h4>font-weight: 400</h4></header>
165                <section class="sample-view">
166                    <p class="font-weight-400">Font weight: 400 (Normal)</p>
167                </section>
168                <header><h4>font-weight: 500</h4></header>
169                <section class="sample-view">
170                    <p class="font-weight-500">Font weight: 500 (Medium)</p>
171                </section>
172                <header><h4>font-weight: 600</h4></header>
173                <section class="sample-view">
174                    <p class="font-weight-600">Font weight: 600 (Semi Bold)</p>
175                </section>
176                <header><h4>font-weight: 700</h4></header>
177                <section class="sample-view">
178                    <p class="font-weight-700">Font weight: 700 (Bold)</p>
179                </section>
180                <header><h4>font-weight: 800</h4></header>
181                <section class="sample-view">
182                    <p class="font-weight-800">Font weight: 800 (Extra Bold)</p>
183                </section>
184                <header><h4>font-weight: 900</h4></header>
185                <section class="sample-view">
186                    <p class="font-weight-900">Font weight: 900 (Black)</p>
187                </section>
188            </section>
189        </article>
190        <article>
191            <h3>font-style</h3>
192            <section>
193                <h4>Keyword Values</h4>
194                <header><h4>font-style: normal</h4></header>
195                <section class="sample-view">
196                    <p class="font-style-normal">This is normal font style.</p>
197                </section>
198                <header><h4>font-style: italic</h4></header>
199                <section class="sample-view">
200                    <p class="font-style-italic">This is italic font style.</p>
201                </section>
202                <header><h4>font-style: oblique</h4></header>
203                <section class="sample-view">
204                    <p class="font-style-oblique">This is oblique font style.</p>
205                </section>
206                <header><h4>font-style: oblique 20deg</h4></header>
207                <section class="sample-view">
208                    <p class="font-style-oblique-20deg">This is an oblique font style with a 20-degree angle.</p>
209                </section>
210            </section>
211        </article>
212        <article>
213            <h3>color</h3>
214            <section>
215                <h4>Color Property Examples</h4>
216                <header><h4>color: red</h4></header>
217                <section class="sample-view">
218                    <p class="color-red">This text is red using a keyword.</p>
219                </section>
220                <header><h4>color: #FF5733</h4></header>
221                <section class="sample-view">
222                    <p class="color-hex">This text is displayed with a hex color code (#FF5733).</p>
223                </section>
224                <header><h4>color: rgb(255, 87, 51)</h4></header>
225                <section class="sample-view">
226                    <p class="color-rgb">This text is displayed using RGB (rgb(255, 87, 51)).</p>
227                </section>
228                <header><h4>color: rgba(255, 87, 51, 0.7)</h4></header>
229                <section class="sample-view">
230                    <p class="color-rgba">This text is displayed using RGBA with transparency (rgba(255, 87, 51, 0.7)).</p>
231                </section>
232                <header><h4>color: hsl(14, 100%, 60%)</h4></header>
233                <section class="sample-view">
234                    <p class="color-hsl">This text is displayed using HSL (hsl(14, 100%, 60%)).</p>
235                </section>
236                <header><h4>color: hsla(14, 100%, 60%, 0.7)</h4></header>
237                <section class="sample-view">
238                    <p class="color-hsla">This text is displayed using HSLA with transparency (hsla(14, 100%, 60%, 0.7)).</p>
239                </section>
240            </section>
241        </article>
242    </main>
243</body>
244</html>

Tipografia (Relacionada a Fontes)

Propriedade `font-size`

 1/* Absolute Values */
 2.font-size-px {
 3    font-size: 16px;
 4}
 5
 6.font-size-pt {
 7    font-size: 12pt;
 8}
 9
10/* Relative Values */
11.font-size-em {
12    font-size: 1.2em; /* 120% of the parent font size */
13}
14
15.font-size-rem {
16    font-size: 1.5rem; /* 150% of the root element's font size */
17}
18
19.font-size-percent {
20    font-size: 150%; /* 150% of the parent font size */
21}
22
23/* Keywords */
24.font-size-medium {
25    font-size: small;
26}
27
28.font-size-medium {
29    font-size: medium;
30}
31
32.font-size-large {
33    font-size: large;
34}
35
36.font-size-x-large {
37    font-size: x-large;
38}
39
40/* Relative Keywords */
41.font-size-larger {
42    font-size: larger;
43}
44
45.font-size-smaller {
46    font-size: smaller;
47}

font-size é uma propriedade CSS usada para especificar o tamanho do texto dentro de um elemento. É usada para ajustar a importância visual do texto e melhorar a legibilidade. font-size pode ser especificado usando várias unidades e métodos.

Principais maneiras de especificar valores

Valores absolutos(px, pt)

Se você quiser usar um tamanho fixo que seja independente do navegador ou dispositivo, especifique os tamanhos de fonte em unidades absolutas como pixels ou pontos.

1p {
2    font-size: 16px;
3}

px: Pixels são a unidade mais comum. Especifique o tamanho em incrementos de 1 pixel.

1p {
2    font-size: 12pt;
3}

pt: Pontos são unidades comumente usadas na impressão. 1 ponto é 1/72 de uma polegada.

Valores relativos(em, rem, %)

Você também pode especificar tamanhos de fonte relativos com base no tamanho da fonte de um elemento pai ou raiz. Isso é adequado para design responsivo.

1p {
2    font-size: 1.2em; /* 120% of the parent element's font size */
3}

em: em é uma unidade relativa baseada no tamanho da fonte do elemento pai. Se o font-size do pai for 16px, então 1em equivale a 16px.

1p {
2    font-size: 1.5rem; /* 150% of the root element's font size */
3}

rem: rem é uma unidade relativa baseada no tamanho da fonte do elemento raiz (geralmente o elemento <html>).

1p {
2    font-size: 150%; /* 150% of the parent element's font size */
3}

%: % é especificado como uma porcentagem em relação ao tamanho da fonte do elemento pai.

Palavras-chave

Você também pode usar palavras-chave para especificar tamanhos de forma fácil e amigável.

 1p.xx-small {
 2    font-size: xx-small;
 3}
 4p.x-small {
 5    font-size: x-small;
 6}
 7p.small {
 8    font-size: small;
 9}
10p.medium {
11    font-size: medium;
12}
13p.large {
14    font-size: large;
15}
16p.x-large {
17    font-size: x-large;
18}
19p.xx-large {
20    font-size: xx-large;
21}

xx-small, x-small, small, medium, large, x-large, xx-large: Estas palavras-chave definem tamanhos de fonte básicos que variam de acordo com o navegador, mas são fáceis de usar.

Palavras-chave relativas

Você pode especificar tamanhos de fonte relativos usando palavras-chave em relação ao elemento pai ou ao tamanho do texto ao redor.

1p {
2    font-size: larger;
3}

larger: larger aumenta o tamanho da fonte em relação ao do elemento pai.

1p {
2    font-size: smaller;
3}

smaller: smaller reduz o tamanho da fonte em relação ao do elemento pai.

Exemplos comuns de uso

No design responsivo, em e rem são frequentemente usados para especificar tamanhos de fonte flexíveis com base no tamanho dos elementos pai ou raiz.
Em design fixo ou design preciso, é comum usar px para fixar o tamanho.

Exemplos de ajustes de tamanho de fonte

 1h1 {
 2    font-size: 2.5rem; /* 2.5 times the size of the root element's font size */
 3}
 4
 5p {
 6    font-size: 16px; /* Fixed size */
 7}
 8
 9.small-text {
10    font-size: smaller; /* Smaller than the parent element's size */
11}

Conclusão

font-size é uma propriedade importante para ajustar a importância visual e a legibilidade do texto. É importante usar unidades e palavras-chave de maneira adequada de acordo com o propósito do design ou para um design responsivo e flexível.

A Propriedade `font-family`

 1/* Specific Font Names */
 2.font-family-arial {
 3    font-family: Arial, sans-serif;
 4}
 5
 6.font-family-verdana {
 7    font-family: Verdana, sans-serif;
 8}
 9
10.font-family-times {
11    font-family: "Times New Roman", serif;
12}
13
14.font-family-courier {
15    font-family: "Courier New", monospace;
16}
17
18.font-family-georgia {
19    font-family: Georgia, serif;
20}
21
22/* Generic Font Families */
23.font-family-serif {
24    font-family: serif;
25}
26
27.font-family-sans-serif {
28    font-family: sans-serif;
29}
30
31.font-family-monospace {
32    font-family: monospace;
33}
34
35.font-family-cursive {
36    font-family: cursive;
37}
38
39.font-family-fantasy {
40    font-family: fantasy;
41}

A propriedade font-family pode especificar principalmente os seguintes dois tipos de valores:.

Nomes de fontes específicos: Especifique o nome de uma fonte específica. Especifique fontes que estão instaladas no sistema ou disponíveis como fontes web.
- Exemplo:
  - Arial
  - Verdana
  - Times New Roman
  - Courier New
  - Georgia
Família de fontes genéricas: Especifique um grupo de fontes de fallback para usar quando uma fonte específica não estiver disponível.
- Exemplo:
  - serif: Serif (ex.: Times New Roman, Georgia)
  - sans-serif: Sans-serif (ex.: Arial, Verdana)
  - monospace: Monospace (ex.: Courier New, Lucida Console)
  - cursive: Cursiva (ex.: Comic Sans MS)
  - fantasy: Fantasia (ex.: Papyrus, Impact)

Como Especificar `font-family`

Ao especificar várias fontes, recomenda-se separar os nomes das fontes com vírgulas e listar uma fonte genérica como fallback no final.

1p {
2    font-family: "Times New Roman", Georgia, serif;
3}

Nesse caso, se Times New Roman não estiver disponível, Georgia será usada, e se nenhuma delas estiver disponível, uma fonte serif será utilizada.

A Propriedade `font-weight`

 1/* Keyword Values */
 2.font-weight-normal {
 3    font-weight: normal; /* Standard thickness (usually 400) */
 4}
 5
 6.font-weight-bold {
 7    font-weight: bold; /* Bold (usually 700) */
 8}
 9
10.font-weight-bolder {
11    font-weight: bolder; /* Bolder than the parent element */
12}
13
14.font-weight-lighter {
15    font-weight: lighter; /* Lighter than the parent element */
16}
17
18/* Numeric Values */
19.font-weight-100 {
20    font-weight: 100; /* Thin (Thin) */
21}
22
23.font-weight-200 {
24    font-weight: 200; /* Extra Light */
25}
26
27.font-weight-300 {
28    font-weight: 300; /* Light */
29}
30
31.font-weight-400 {
32    font-weight: 400; /* Normal */
33}
34
35.font-weight-500 {
36    font-weight: 500; /* Medium */
37}
38
39.font-weight-600 {
40    font-weight: 600; /* Semi Bold */
41}
42
43.font-weight-700 {
44    font-weight: 700; /* Bold */
45}
46
47.font-weight-800 {
48    font-weight: 800; /* Extra Bold */
49}
50
51.font-weight-900 {
52    font-weight: 900; /* Black */
53}

font-weight é uma propriedade CSS usada para especificar a espessura do texto. Ela desempenha um papel importante na ênfase visual e no estilo do texto, sendo usada para alterar o estilo da fonte. font-weight pode ser especificado usando números ou palavras-chave para indicar uma faixa de espessura, de fina a negrito.

Valores Principais de `font-weight`

Palavras-chave

1p {
2    font-weight: normal; /* Default thickness */
3}

normal representa o peso padrão da fonte. Normalmente corresponde a 400.

1p {
2    font-weight: bold; /* Bold */
3}

bold representa texto em negrito. Normalmente corresponde a 700.

1p {
2    font-weight: bolder; /* Bolder than the parent element's font-weight */
3}

bolder representa texto que é mais negrito que o elemento pai.

1p {
2    font-weight: lighter; /* Lighter than the parent element's font-weight */
3}

lighter representa texto que é mais claro que o elemento pai.

Valores Numéricos

1p {
2    font-weight: 300; /* Light text */
3}
4
5h1 {
6    font-weight: 700; /* Bold text */
7}

font-weight também pode ser especificado como um número, variando de 100 a 900. Números menores resultam em texto mais fino, e números maiores resultam em texto mais espesso. Normalmente, as famílias de fontes suportam uma faixa específica de espessuras, mas nem todos os números estão disponíveis para todas as fontes.

100: Fino
200: Extra Claro
300: Claro
400: Normal
500: Médio
600: Semi Negrito
700: Negrito
800: Extra Negrito
900: Preto

Exemplos de Como Usar `font-weight`

 1h1 {
 2    font-weight: 900; /* Black (Extra Bold) */
 3}
 4
 5p.normal {
 6    font-weight: normal; /* Standard thickness */
 7}
 8
 9p.bold {
10    font-weight: bold; /* Bold */
11}
12
13p.lighter {
14    font-weight: lighter; /* Lighter than the parent element */
15}
16
17p.custom-weight {
18    font-weight: 500; /* Medium */
19}

Uso Prático

Texto padrão geralmente usa 400 (normal).
Para títulos ou partes enfatizadas, é comum usar 700 (bold).
Dependendo do design, pesos intermediários como 500 ou 600 também podem ser usados para evitar ênfase excessiva.

Resumo

font-weight é uma propriedade que especifica a espessura do texto, usando palavras-chave como normal ou bold, ou números de 100 a 900.
lighter e bolder ajustam-se relativamente à espessura do elemento pai.
Escolher um font-weight apropriado com base no design e na legibilidade é importante.

A Propriedade `font-style`

 1/* Font style examples */
 2.font-style-normal {
 3    font-style: normal; /* Normal font style */
 4}
 5
 6.font-style-italic {
 7    font-style: italic; /* Italic */
 8}
 9
10.font-style-oblique {
11    font-style: oblique; /* Slanted text */
12}
13
14.font-style-oblique-20deg {
15    font-style: oblique 20deg; /* Slanted text with a 20-degree angle */
16}

font-style é uma propriedade CSS usada para especificar o estilo dos caracteres, particularmente para aplicar estilos itálico ou normal. Essa propriedade é frequentemente usada para dar ênfase ao texto e no design, especialmente em títulos e citações.

Valores Principais de `font-style`

`normal`

1p {
2    font-style: normal;
3}

normal é o estilo padrão de caracteres (normalmente caracteres em posição vertical).

`italic`

1p {
2    font-style: italic;
3}

italic torna o texto itálico (inclinado). Este estilo pode ser aplicado se a família de fontes suportar itálico.

`oblique`

1p {
2    font-style: oblique;
3}

oblique torna o texto inclinado. Ao contrário de italic, se a fonte não tiver uma versão itálica, isso pode inclinar o texto artificialmente.

`oblique <angle>`

1p {
2    font-style: oblique 20deg;
3}

Especifique um ângulo com oblique para inclinar o texto pelo ângulo especificado. Esta especificação é para personalizar ainda mais o oblique. Atualmente, a maioria dos navegadores não suporta especificação de ângulo, mas alguns sim.

Uso de `font-style`

italic é frequentemente usado para ênfase, citações e títulos de livros.
oblique é frequentemente usado quando uma fonte não inclui um estilo itálico, como um meio de inclinar o texto artificialmente.
normal é usado para retornar ao estilo de texto normal.

Resumo

font-style é usado para controlar a inclinação do texto, com três valores principais: normal, italic e oblique.
No design, itálicos são frequentemente usados para destacar texto, e se a fonte não os suporta, oblique pode ser usado para inclinar o texto.

Propriedade `color`

 1/* Color examples */
 2.color-red {
 3    color: red;
 4}
 5
 6.color-hex {
 7    color: #FF5733;
 8}
 9
10.color-rgb {
11    color: rgb(255, 87, 51);
12}
13
14.color-rgba {
15    color: rgba(255, 87, 51, 0.7);
16}
17
18.color-hsl {
19    color: hsl(14, 100%, 60%);
20}
21
22.color-hsla {
23    color: hsla(14, 100%, 60%, 0.7);
24}

A propriedade color é uma propriedade fundamental no CSS para especificar a cor do texto. Ela é usada para alterar a cor do texto dos elementos HTML e pode especificar cores em vários formatos.

Explicação:

A classe color-red especifica a cor do texto como vermelho usando uma palavra-chave.
- Você pode especificar nomes de cores como red, blue e green, que estão definidos no CSS.
A classe color-hex especifica cores usando códigos de cor em formato hexadecimal.
- Você pode especificar com 3 dígitos, como #F00. Nesse caso, #F00 tem a mesma cor que #FF0000.
A classe color-rgb especifica cores usando o formato RGB.
- RGB: Especifica os componentes vermelho, verde e azul em um intervalo de 0 a 255.
A classe color-rgba usa o formato RGBA para adicionar transparência.
A classe color-hsl especifica cores usando o formato HSL.
- As cores podem ser especificadas com matiz, saturação e luminosidade. A matiz é especificada de 0 a 360 graus, e a saturação e a luminosidade são especificadas de 0% a 100%.
A classe color-hsla usa o formato HSLA para adicionar transparência.

Você pode acompanhar o artigo acima usando o Visual Studio Code em nosso canal do YouTube. Por favor, confira também o canal do YouTube.

YouTube Video

Regras CSS `@`Propriedades de CSS relacionadas ao texto

Propriedades de CSS Relacionadas a Fontes

YouTube Video

Criando HTML para visualização

Tipografia (Relacionada a Fontes)

Propriedade font-size

Principais maneiras de especificar valores

Valores absolutos(px, pt)

Valores relativos(em, rem, %)

Palavras-chave

Palavras-chave relativas

Exemplos comuns de uso

Exemplos de ajustes de tamanho de fonte

Conclusão

A Propriedade font-family

Como Especificar font-family

A Propriedade font-weight

Valores Principais de font-weight

Palavras-chave

Valores Numéricos

Exemplos de Como Usar font-weight

Uso Prático

Resumo

A Propriedade font-style

Valores Principais de font-style

normal

italic

oblique

oblique <angle>

Uso de font-style

Resumo

Propriedade color

Explicação:

YouTube Video

Propriedade `font-size`

A Propriedade `font-family`

Como Especificar `font-family`

A Propriedade `font-weight`

Valores Principais de `font-weight`

Exemplos de Como Usar `font-weight`

A Propriedade `font-style`

Valores Principais de `font-style`

`normal`

`italic`

`oblique`

`oblique <angle>`

Uso de `font-style`

Propriedade `color`