Proprietà CSS relative ai font

Articles

Questo articolo spiega le proprietà CSS relative ai font.

Puoi imparare i casi d'uso e come scrivere proprietà come font-style e font-family.

YouTube Video

Creazione di HTML per l'anteprima

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 (Relativa ai font)

Proprietà `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 è una proprietà CSS utilizzata per specificare la dimensione del testo all'interno di un elemento. Viene utilizzata per regolare l'importanza visiva del testo e migliorare la leggibilità. font-size può essere specificato utilizzando diverse unità e metodi.

Modi principali per specificare i valori

Valori assoluti(px, pt)

Se desideri utilizzare una dimensione fissa indipendente dal browser o dal dispositivo, specifica le dimensioni del font in unità assolute come pixel o punti.

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

px: I pixel sono l'unità più comune. Specifica la dimensione in incrementi di 1 pixel.

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

pt: I punti sono unità comunemente utilizzate nella stampa. 1 punto equivale a 1/72 di pollice.

Valori relativi(em, rem, %)

Puoi anche specificare dimensioni relative del font in base alla dimensione del font di un elemento padre o radice. Questo è adatto per il design reattivo.

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

em: em è un'unità relativa basata sulla dimensione del font dell'elemento padre. Se il font-size del padre è 16px, allora 1em è pari a 16px.

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

rem: rem è un'unità relativa basata sulla dimensione del font dell'elemento radice (di solito l'elemento <html>).

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

%: % viene specificato come percentuale relativa alla dimensione del font dell'elemento padre.

Parole chiave

Puoi anche utilizzare parole chiave per specificare facilmente dimensioni intuitive per l'utente.

 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: Queste parole chiave definiscono dimensioni base dei font che variano a seconda del browser ma sono facili da usare.

Parole chiave relative

Puoi specificare dimensioni relative dei font utilizzando parole chiave in relazione all'elemento padre o alla dimensione del testo circostante.

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

larger: larger rende la dimensione del font più grande di quella dell'elemento padre.

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

smaller: smaller rende la dimensione del font più piccola di quella dell'elemento padre.

Esempi di uso comune

Nel design responsivo, em e rem sono spesso utilizzati per specificare dimensioni flessibili dei font in base alla dimensione degli elementi padre o radice.
Nel design fisso o nel design preciso, è comune utilizzare px per fissare la dimensione.

Esempi di regolazione delle dimensioni del carattere

 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}

Conclusione

font-size è una proprietà importante per regolare l'importanza visiva e la leggibilità del testo. È importante utilizzare unità e parole chiave in modo appropriato in base allo scopo del design o per un design responsivo flessibile.

La proprietà `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}

La proprietà font-family può principalmente specificare i seguenti due tipi di valori:.

Nomi di font specifici: Specifica il nome di un particolare font. Specifica i font installati sul sistema o disponibili come font web.
- Esempio:
  - Arial
  - Verdana
  - Times New Roman
  - Courier New
  - Georgia
Famiglia di font generic: Specifica un gruppo di font di riserva da utilizzare quando un font specifico non è disponibile.
- Esempio:
  - serif: Serif (es., Times New Roman, Georgia)
  - sans-serif: Sans-serif (es., Arial, Verdana)
  - monospace: Monospace (es., Courier New, Lucida Console)
  - cursive: Corsivo (es., Comic Sans MS)
  - fantasy: Fantasy (es., Papyrus, Impact)

Come specificare `font-family`

Quando specifichi più font, è consigliabile separare i nomi dei font con le virgole e indicare un font generico come riserva alla fine.

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

In questo caso, se Times New Roman non è disponibile, viene utilizzato Georgia; se nessuno dei due è disponibile, verrà utilizzato un font serif.

La proprietà `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 è una proprietà CSS utilizzata per specificare lo spessore del testo. Svolge un ruolo significativo nell'enfasi visiva e nello stile del testo, ed è usato per cambiare lo stile del font. font-weight può essere specificato usando numeri o parole chiave per indicare una gamma di spessori da sottile a grassetto.

Valori principali di `font-weight`

Parole chiave

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

normal rappresenta il peso standard del carattere. Solitamente corrisponde a 400.

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

bold rappresenta il testo in grassetto. Solitamente corrisponde a 700.

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

bolder rappresenta il testo più marcato rispetto al suo elemento genitore.

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

lighter rappresenta il testo più leggero rispetto al suo elemento genitore.

Valori Numerici

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

font-weight può anche essere specificato come un numero, che varia da 100 a 900. Numeri più piccoli producono un testo più sottile, mentre numeri più grandi producono un testo più spesso. Di solito, le famiglie di font supportano una gamma di spessori specifici, ma non tutti i numeri sono disponibili per tutti i font.

100: Molto sottile
200: Extra Leggero
300: Leggero
400: Normale
500: Medio
600: Semi Grassetto
700: Grassetto
800: Extra Grassetto
900: Nero

Esempi di come usare `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 Pratico

Testo standard di solito utilizza 400 (normal).
Per titoli o parti enfatizzate, è comune utilizzare 700 (bold).
A seconda del design, è possibile utilizzare pesi intermedi come 500 o 600 per evitare un'eccessiva enfasi.

Riepilogo

font-weight è una proprietà che specifica lo spessore del testo, utilizzando parole chiave come normal o bold, o numeri da 100 a 900.
lighter e bolder si adattano relativamente allo spessore dell'elemento padre.
Scegliere un font-weight appropriato in base al design e alla leggibilità è importante.

La Proprietà `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 è una proprietà CSS utilizzata per specificare lo stile dei caratteri, in particolare per applicare stili corsivi o normali. Questa proprietà è spesso usata per l'enfasi e il design del testo, in particolare nei titoli e nelle citazioni.

Valori Principali di `font-style`

`normal`

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

normal è lo stile standard dei caratteri (caratteri generalmente in verticale).

`italic`

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

italic rende il testo corsivo (inclinato). Questo stile può essere applicato se la famiglia di font supporta il corsivo.

`oblique`

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

oblique rende il testo inclinato. A differenza di italic, se il font non ha una versione corsiva, questo può inclinare il testo artificialmente.

`oblique <angle>`

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

Specifica un angolo con oblique per inclinare il testo sull'angolo specifico. Questa specifica serve per personalizzare ulteriormente oblique. Attualmente, la maggior parte dei browser non supporta la specifica degli angoli, ma alcuni lo fanno.

Utilizzo di `font-style`

italic è spesso utilizzato per enfasi, citazioni e titoli di libri.
oblique è spesso usato quando un font non include uno stile corsivo, come metodo per inclinare il testo artificialmente.
normal viene utilizzato per tornare a uno stile di testo normale.

Riepilogo

font-style viene utilizzato per controllare l'inclinazione del testo, con tre valori principali: normal, italic e oblique.
Nel design, il corsivo viene spesso usato per enfatizzare il testo e, se il font non lo supporta, si può usare oblique per inclinare il testo.

Proprietà `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}

La proprietà color è una proprietà fondamentale in CSS per specificare il colore del testo. È usata per cambiare il colore del testo negli elementi HTML e può specificare colori in vari formati.

Spiegazione:

La classe color-red specifica il colore del testo come rosso utilizzando una parola chiave.
- Puoi specificare nomi di colori come red, blue, green che sono definiti in CSS.
La classe color-hex specifica i colori utilizzando codici esadecimali.
- Puoi specificare con 3 cifre come #F00. In questo caso, #F00 è lo stesso colore di #FF0000.
La classe color-rgb specifica i colori utilizzando il formato RGB.
- RGB: Specifica i componenti rosso, verde e blu in un intervallo da 0 a 255.
La classe color-rgba utilizza il formato RGBA per aggiungere trasparenza.
La classe color-hsl specifica i colori utilizzando il formato HSL.
- I colori possono essere specificati con tonalità, saturazione e luminosità. La tonalità è specificata da 0 a 360 gradi, e la saturazione e la luminosità sono specificate da 0% a 100%.
La classe color-hsla utilizza il formato HSLA per aggiungere trasparenza.

Puoi seguire l'articolo sopra utilizzando Visual Studio Code sul nostro canale YouTube. Controlla anche il nostro canale YouTube.

YouTube Video

Regole CSS `@`Proprietà CSS relative al testo

Proprietà CSS relative ai font

YouTube Video

Creazione di HTML per l'anteprima

Tipografia (Relativa ai font)

Proprietà font-size

Modi principali per specificare i valori

Valori assoluti(px, pt)

Valori relativi(em, rem, %)

Parole chiave

Parole chiave relative

Esempi di uso comune

Esempi di regolazione delle dimensioni del carattere

Conclusione

La proprietà font-family

Come specificare font-family

La proprietà font-weight

Valori principali di font-weight

Parole chiave

Valori Numerici

Esempi di come usare font-weight

Uso Pratico

Riepilogo

La Proprietà font-style

Valori Principali di font-style

normal

italic

oblique

oblique <angle>

Utilizzo di font-style

Riepilogo

Proprietà color

Spiegazione:

YouTube Video

Proprietà `font-size`

La proprietà `font-family`

Come specificare `font-family`

La proprietà `font-weight`

Valori principali di `font-weight`

Esempi di come usare `font-weight`

La Proprietà `font-style`

Valori Principali di `font-style`

`normal`

`italic`

`oblique`

`oblique <angle>`

Utilizzo di `font-style`

Proprietà `color`