CSS per aspiranti programmatori: B – FONT

Dopo aver affrontato un primo approccio ai CSS all’ indirizzo https://umbriawayfocus.wordpress.com/2018/12/12/css-per-aspiranti-programmatori-a-overview/ passiamo adesso ad analizzare i FONT. La proprietà family-font specifica il carattere per un elemento. Esistono due tipi di nomi di famiglia di caratteri:

– famiglia di font: una specifica famiglia di font (come Times New Roman o Arial)
– famiglia generica: un gruppo di famiglie di font con aspetto simile (come Serif o Monospace). HTML:

<code>
<p class=”serif”>
This is a paragraph shown in serif font.
</p>
<p class=”sansserif”>
This is a paragraph shown in sans-serif font.
</p>
<p class=”monospace”>
This is a paragraph shown in monospace font.
</p>
<p class=”cursive”>
This is a paragraph shown in cursive font.
</p>
<p class=”fantasy”>
This is a paragraph shown in fantasy font.
</p>
</code>

CSS:

<code>
p.serif {
font-family: “Times New Roman”, Times, serif;
}
p.sansserif {
font-family: Helvetica, Arial, sans-serif;
}
p.monospace {
font-family: “Courier New”, Courier, monospace;
}
p.cursive {
font-family: Florence, cursive;
}
p.fantasy {
font-family: Blippo, fantasy;
}
</code>

Separa ogni valore con una virgola per indicare che sono alternative. Se il nome di una famiglia di font è più di una parola, deve essere racchiuso tra virgolette: “Times New Roman”. La proprietà della famiglia di caratteri dovrebbe contenere diversi nomi di caratteri come un sistema di “fallback”. Quando si specifica un carattere Web in uno stile CSS, aggiungere più di un nome di carattere, al fine di evitare comportamenti imprevisti. Se il computer client per qualche motivo non ha quello che scegli, proverà il successivo. È buona norma specificare una famiglia di caratteri generica per consentire al browser di selezionare un carattere simile nella famiglia generica, se non sono disponibili altri tipi di carattere.

body {
font-family: Arial, “Helvetica Neue”, Helvetica, sans-serif;
}

Se il browser non supporta il carattere Arial, prova i successivi caratteri (Helvetica Neue, quindi Helvetica). Se il browser non ne ha nessuno, proverà il generico sans-serif. Ricordarsi di usare le virgolette se il nome del font è composto da più di una parola. La proprietà font-size imposta la dimensione di un font. Un modo per impostare la dimensione dei caratteri sul Web consiste nell’utilizzare le parole chiave. Ad esempio xx-small, small, medium, large, large, ecc.

L’HTML:

<code>
<p class=”small”>
Paragraph text set to be small
</p>
<p class=”medium”>
Paragraph text set to be medium
</p>
<p class=”large”>
Paragraph text set to be large
</p>
<p class=”xlarge”>
Paragraph text set to be very large
</p>
</code>

CSS:

<code>
p.small {
font-size: small;
}
p.medium {
font-size: medium;
}
p.large {
font-size: large;
}
p.xlarge {
font-size: x-large;
}
</code>

Le parole chiave sono utili se non si desidera che l’utente sia in grado di aumentare la dimensione del carattere perché influirà negativamente sull’aspetto del proprio sito. Puoi anche usare valori numerici in pixel o em per manipolare la dimensione del carattere. L’impostazione della dimensione del carattere in valori di pixel (px) è una buona scelta quando hai bisogno di precisione dei pixel e ti dà il pieno controllo sulle dimensioni del testo. L’unità di dimensioni em è un altro modo per impostare la dimensione del carattere (em è un’unità di dimensioni relative). Permette a tutti i principali browser di ridimensionare il testo. Se non hai impostato la dimensione del carattere in alcun punto della pagina, allora è la dimensione predefinita del browser, che è 16px.

Per calcolare la dimensione em, basta usare la seguente formula: em = pixels / 16 ; per esempio:

<code>
h1 {
font-size: 20px;
}
</code>

<code>
h1 {
font-size: 1.25em;
}
</code>

Entrambi gli esempi produrranno lo stesso risultato nel browser, perché 20/16 = 1.25em. Prova diverse combinazioni di dimensioni del testo e zoom della pagina in una varietà di browser per assicurarti che il testo rimanga leggibile. La proprietà stile font viene in genere utilizzata per specificare il testo in corsivo.

HTML:

<code>
<p class=”italic”>This is a paragraph in italic style.</p>
</code>

CSS:

<code>
p.italic {
font-style: italic;
}
</code>

La proprietà in stile font ha tre valori: normale, corsivo e obliquo. Oblique è molto simile al corsivo, ma meno supportato.

HTML:

<code>
<p class=”normal”>This paragraph is normal.</p>
<p class=”italic”>This paragraph is italic.</p>
<p class=”oblique”>This paragraph is oblique.</p>
</code>

CSS:

<code>
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}
</code>

Il tag HTML <i> produrrà esattamente lo stesso risultato dello stile di carattere corsivo. Il peso del carattere controlla l’audacia o lo spessore del testo. I valori possono essere impostati come normali (dimensione predefinita), grassetto, più audace e più chiaro.

HTML:

<code>
<p class=”light”>This is a font with a “lighter” weight.</p>
<p class=”bold”>This is a font with a “bold” weight.</p>
<p class=”bolder”>This is a font with a “bolder” weight.</p>
</code>

CSS:

<code>
p.light {
font-weight: lighter;
}
p.bold {
font-weight: bold;
}
p.bolder {
font-weight: bolder;
}
</code>

Puoi anche definire il peso del carattere con un numero compreso tra 100 (sottile) e 900 (spesso), a seconda di quanto vuoi che sia il testo. 400 è lo stesso del normale e 700 è uguale al grassetto.

<code>
<p class=”light”>This is a font with a “lighter” weight.</p>
<p class=”thick”>This is a font with a “bold” weight.</p>
<p class=”thicker”>This is a font with a “700” weight.</p>
</code>

<code>
p.light {
font-weight: lighter;
}
p.thick {
font-weight: bold;
}
p.thicker {
font-weight: 700;
}
</code>

Anche il tag HTML <strong> rende il testo in grassetto. La proprietà CSS font-variant ti consente di convertire il tuo font in maiuscolo. I valori possono essere impostati come normali, small cap ed ereditari.

<code>
<p class=”normal”>Paragraph font variant set to normal.</p>
<p class=”small”>Paragraph font variant set to small-caps.</p>
</code>

<code>
p.normal {
font-variant: normal;
}
p.small {
font-variant: small-caps;
}
</code>

Non tutti i font supportano la variante dei font CSS, quindi assicurati di testare prima di pubblicare. La proprietà color CSS specifica il colore del testo. Un metodo per specificare il colore del testo sta usando un nome di colore: rosso, verde, blu, ecc. Ecco un esempio di modifica del colore del tuo font.

HTML:

<code>
<p class=”example”>The text inside the paragraph is green.</p>
The text outside the paragraph is black (by default).
</code>

CSS:

<code>
p.example {
color: green;
}
</code>

Un altro modo per definire i colori è usare valori esadecimali e RGB. La forma esadecimale è un cancelletto (#) seguito al massimo da 6 valori esadecimali (0-F). RGB definisce i singoli valori per Rosso, Verde e Blu.
Nell’esempio seguente, utilizziamo il valore esadecimale per impostare il colore dell’intestazione su blu e il modulo RGB per rendere il paragrafo rosso.

<code>
<h1>This is a heading</h1>
<p class=”example”>This is a paragraph</p>
</code>

<code>
h1 {
color: #0000FF;
}
p.example {
color: rgb(255,0,0);
}
</code>

Annunci

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione /  Modifica )

Google photo

Stai commentando usando il tuo account Google. Chiudi sessione /  Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione /  Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione /  Modifica )

Connessione a %s...