Come utilizzare al meglio i caratteri nei CSS?

Questo articolo ti introdurrà a un argomento semplice ma importante che è Fonts In e ti darà anche una dimostrazione pratica sull'argomento. I seguenti suggerimenti saranno trattati in questo articolo,

• Caratteri in CSS
• Attributi in CSS Font
• attributo stile carattere
• attributo font-weight
• attributo dimensione del carattere
• attributo della famiglia di caratteri

I siti Web trasportano contenuti sotto forma di immagini, audio, video e contenuti testuali. Tuttavia, la maggior parte delle pagine Web si basa ancora sul testo come formato predominante. Questo perché il testo normale offre alcuni vantaggi molto significativi.

Leggibilità non intrusiva: vuoi controllare l'ultimo punteggio della partita mentre sei in ufficio. Ovviamente vuoi un rapido aggiornamento del testo, non un video rumoroso!
Requisiti di larghezza di banda di rete ridotti: i contenuti di testo possono essere caricati anche in aree con scarsa connettività Internet, mentre i contenuti multimediali non possono.
Facilità di ricerca: i siti Web tengono sempre d'occhio la facilità con cui i loro contenuti vengono notati sui motori di ricerca. Il testo è più adatto per questo, almeno fino a quando l'IA non avrà completamente il controllo di Internet!

Durante la formattazione del contenuto del testo, i web designer hanno solo pochi parametri su cui lavorare: carattere, allineamento, evidenziazione e colore. Selezionare il carattere giusto per il tuo testo è una scelta fondamentale. La pratica standard consiste nell'usare i tag dei font CSS per definire i font per il testo nelle pagine HTML.
Se sei nuovo nel mondo della programmazione HTML, fai un tour introduttivo di base qui. Potresti voler leggere le basi CSS prima di iniziare a conoscere i caratteri CSS.

Per un tutorial CSS completo, visita Edureka CSS Tutorial For Beginners. Avrai un eccellente avvertimento sul modo in cui i CSS devono essere utilizzati per aumentare il web design HTML.

Andando avanti con questo articolo sui caratteri nei CSS

Caratteri in CSS

Un carattere è fondamentalmente un insieme di caratteristiche associate alla visualizzazione del testo. I caratteri si differenziano l'uno dall'altro per dimensione, rientro, larghezza, inclinazione e così via. Cominciamo con una visualizzazione di testo di base con caratteri diversi.

Esempio 1: titoli e paragrafi in vari caratteri

body {background-color: lightblue} h1 {font: bold 30px arial, sans-serif} h2 {font: 15px verdana} p {font: corsivo grassetto 12px / 30px Georgia, serif}
Il paragrafo in corsivo grassetto Georgia font
 

 Esempio 1: output 

Nell'esempio 1, abbiamo 3 diverse righe di testo con caratteri diversi. Noterai che ciascuno dei caratteri varia nella larghezza dei caratteri, nei rientri, ecc.

Andando avanti con questo articolo sui caratteri nei CSS

Attributi in CSS Font

I font CSS hanno 4 attributi principali: stile, peso, dimensioni e famiglia. L'attributo style denota normale o corsivo. Il peso mostra il carattere in chiaro o in grassetto. Il peso può anche essere espresso numericamente. La dimensione è semplicemente la dimensione del carattere più grande è la dimensione, più grande è l'aspetto del testo. Esistono diversi modi in cui è possibile assegnare la dimensione del carattere, descrizioni dettagliate sono fornite nelle sezioni successive. L'attributo della famiglia serve per assegnare il nome del carattere al testo.

Nell'esempio 1, abbiamo utilizzato nomi di caratteri diversi per i titoli e il paragrafo. Sotto i tag h1 e p, vediamo due nomi di font elencati, mentre il tag h2 nomina solo un font. Questa è la definizione di una famiglia di caratteri, ne parleremo più avanti.

Andando avanti con questo articolo sui caratteri nei CSS

attributo stile carattere:

I due stili principali che possono essere impostati sono 'normale' e 'corsivo'. Il corsivo dovrebbe essere di natura corsiva con un'inclinazione. Normale è l'opzione predefinita che è diritta. C'è un'altra opzione meno utilizzata chiamata 'obliqua', che assomiglia all'opzione corsivo nella maggior parte dei caratteri. Puoi anche impostare lo stile su 'eredita' in modo che prenda lo stile del carattere dal suo elemento genitore.

casting double a int java

Andando avanti con questo articolo sui caratteri nei CSS

attributo font-weight:

Questo attributo decide se il carattere deve apparire spesso o sottile. Può essere impostato su 'normale' o 'grassetto'. Il valore predefinito è normale. Questo valore può anche essere impostato come numerico. Il peso di 400 rappresenta il normale e 700 è per il grassetto. Ci sono poche altre impostazioni (che vanno da 100 - molto leggero a 900 - molto grassetto), ma non sono supportate da tutti i caratteri. Tutte le opzioni di peso sono mostrate nell'Esempio 3.

Andando avanti con questo articolo sui caratteri nei CSS

attributo dimensione del carattere:

L'attributo size può essere impostato in più modi. Elenchiamo questi modi di seguito.
● Valore enumerato come 'medio', 'grande'. Infatti, proprio come le taglie di abbigliamento, i valori possono variare da XX Small a XX Large!
● Impostato rispetto al suo elemento genitore, come 'maggiore' o 'minore'.
● Percentuale della dimensione dell'elemento padre.
● Imposta come 'eredita' per adottare direttamente la dimensione dell'elemento padre.
● Come valore assoluto nelle unità di px (pixel), pt (punti) o cm (centimetro)
'Medio' è il valore predefinito impostato per questo parametro.

Andando avanti con questo articolo sui caratteri nei CSS

attributo font-family:

In HTML, la famiglia di caratteri CSS serve per impostare il nome del carattere. Puoi semplicemente inserire un singolo nome di carattere con il tag. Oppure puoi assegnare più valori come un elenco di famiglie di caratteri che definisce la priorità in cui il browser deve scegliere il carattere.
L'elenco ha la priorità da sinistra a destra, sotto forma di un sistema di riserva. Viene scelto il primo valore, se disponibile, oppure il controllo passa al successivo, fino al raggiungimento della fine della lista. La famiglia di caratteri predefinita è definita dalle preferenze del browser.
Le famiglie di caratteri CSS sono di 2 tipi: famiglie generiche e famiglie di caratteri.
● Famiglie generiche: in base ad alcune caratteristiche generali, i caratteri sono raggruppati come 'serif', 'sans serif', 'monospace' e così via. Ad esempio, Sans serif significa caratteri senza lo stile serif.
● Nomi di famiglia - caratteri appartenenti a specifiche gerarchie familiari. Times, Arial, Courier sono tutte famiglie di caratteri e Times New Roman è un esempio di carattere della famiglia Times.
Le varie opzioni di utilizzo della famiglia di caratteri sono elencate nell'esempio 4 di seguito.

Alcuni punti comuni da notare

● Come molte altre proprietà CSS, alcune delle impostazioni dei caratteri variano in browser differenti. Verificare il supporto del browser prima di utilizzare alcune impostazioni dei caratteri rari.
● È possibile impostare le impostazioni dei caratteri separatamente utilizzando i singoli tag di stile carattere, spessore carattere, ecc. In alternativa, se si preferisce il codice compatto, è possibile utilizzare l'attributo carattere abbreviato con tutti i valori sulla stessa riga.
● Negli scenari utente in cui si desidera che la dimensione del carattere vari a seconda della dimensione del browser, è disponibile un'utile impostazione della dimensione del carattere chiamata impostazione del carattere reattivo. Può essere impostato con un'unità vw, che significa 'larghezza del riquadro di visualizzazione'. In questo modo la dimensione del testo seguirà la dimensione della finestra del browser.

Spero che tu abbia trovato le informazioni che stavi cercando su Fonts In CSS. Condividi la tua esperienza con noi nella sezione commenti qui sotto. Progettazione felice!

Se sei interessato a saperne di più sullo sviluppo web, dai un'occhiata al di Edureka. La formazione sulla certificazione per lo sviluppo web ti aiuterà a imparare come creare siti Web straordinari utilizzando HTML5, CSS3, Twitter Bootstrap 3, jQuery e API di Google e a distribuirli su Amazon Simple Storage Service (S3).