Fonts CSS | Soluzione API Aspose.Font
L’articolo ha lo scopo di insegnarti caratteri HTML CSS e le loro proprietà, raffigurando esempi di codice come lavorare con loro. Imparerai a rendere il tuo testo audace o semiboldo, a cambiare la dimensione del carattere o la famiglia dei caratteri in CSS e molti altri.
Vedrai anche la differenza tra le proprietà del carattere CSS e la classificazione comune delle proprietà del carattere. Questi fondamentali sono descritti nell’articolo Cos’è il carattere?.
Caratteri CSS
Il carattere in CSS è una risorsa che contiene una rappresentazione visiva dei glifi. Per semplificare, ha informazioni che corrispondono ai glifi ai loro codici.
Le risorse di carattere possono essere impostate localmente su un dispositivo in cui funziona un browser. Per tali caratteri che descrivono le informazioni possono essere ottenuti direttamente dalla risorsa del carattere (ad esempio da un file montserrat.ttf). Per i caratteri Web, tali informazioni sono allegate al collegamento sulla risorsa del carattere.
Proprietà del carattere CSS
CSS fornisce diverse proprietà dei caratteri per controllare l’aspetto e il comportamento dei caratteri sulle pagine Web. Possono essere utilizzati individualmente o combinati per ottenere gli effetti tipografici desiderati nei CSS. Non tutti sono supportati da tutti i browser, quindi è essenziale considerare la compatibilità tra browser quando si utilizzano queste proprietà. Diamo un’occhiata ad alcuni (il più usato) di loro:
- Font-family;
- Font-weight;
- Font-stretch;
- Font-style;
- Font-size;
- Font;
- Font-synthesis,
- Text-decoration,
- Text-transform,
- Letter-spacing,
- Line-height,
- Word-spacing.
Famiglia dei caratteri CSS
I caratteri con il design comune sono generalmente raggruppati in una famiglia di carattere. All’interno della famiglia, gli glifi possono variare in larghezza, pendenza o peso.
La proprietà CSS Font-Family viene utilizzata per la scelta del carattere tipografico. È meglio avvisare tutte le variazioni dei caratteri di un tipo, perché è difficile prevedere se il carattere è disponibile sul computer dell’utente o meno. In questo caso, un browser controllerà la loro presenza, risolvendo i caratteri notificati uno per uno.
La proprietà della famiglia dei caratteri CSS è ereditata.
In CSS Font-Family ha i prossimi valori:
- Nome della famiglia dei caratteri (
Verdana,Montserrat,corriere). - Famiglia generica. Qui è necessario notare uno dei cinque tipi di carattere: serif, sans serif, corsivo (uguale a caratteri di script), fantasia (uguale a caratteri di visualizzazione) o monospace.
initial- imposta i valori predefiniti.ererit- Assegna il genitore i suoi valori.
Esempio di utilizzo.
Lì i prossimi parametri sono impostati nell’esempio.
| Proprietà | Valore per il testo 1 | Valore per il testo 2 | Valore per il testo 3 |
|---|---|---|---|
| font-family: | Lobster, Paisfico, cursive; | Audiowide, fantasy; | Courier, monospace; |
Sintassi:
1// text 1
2.text1 {
3 font-family: Lobster, cursive;
4}
5// text 2
6.text2 {
7 font-family: Audiowide, fantasy;
8}
9// text 3
10.text3 {
11 font-family: Courier, monospace;
12}Il risultato dell’applicazione sarà il prossimo (si noti che le dimensioni del carattere e il colore sono state impostate allo stesso modo per tutti e tre i testi nel <body>)
Peso del carattere CSS
La proprietà del carattere di carattere è responsabile dello spessore delle linee del carattere.
La proprietà del peso del carattere CSS è ereditata.
In HTML CSS Font-Weight può avere i valori successivi:
normal- è un valore predefinito pari a 400.bold- rende il carattere semibold. È pari al peso di 700.bolder- imposta un peso più pesante rispetto al predecessore.lighter- imposta un peso più leggero rispetto al predecessore.100, 200, 300, 400, 500, 600, 700, 800, 900- dove100imposta il carattere più leggero e900imposta il carattere più pesante (grassetto).initial- imposta i valori predefiniti.inherit- eredita i valori del genitore.
Esempio di utilizzo.
Respingiamo i testi con i prossimi parametri di font-peso.
| Proprietà | Valore per il testo 1 | Valore per il testo 2 | Valore per il testo 3 |
|---|---|---|---|
| font-weight: | 900; | 500; | 200; |
Sintassi:
1// text 1
2.text1 {
3 font-weight: 900;
4}
5// text 2
6.text2 {
7 font-weight: 500;
8}
9// text 3
10.text3 {
11 font-weight: 200;
12}Il risultato dell’applicazione apparirà così (si noti che la dimensione e il colore del carattere sono stati impostati allo stesso modo per tutti e tre i testi in <body>). Inoltre, è importante ricordare che il carattere utilizzato deve avere le variazioni di spessore necessarie. La maggior parte dei caratteri è disponibile solo nei pesi semi-bold e normal. Il carattere Segoe UI utilizzato nell’esempio presenta sufficienti variazioni di spessore del carattere per consentire la visualizzazione del testo con tutti i valori impostati nell’esempio.
Attrema del carattere CSS
La proprietà Font-Stretch consente di scegliere il carattere normale, condensato o ampliato dalla famiglia dei caratteri. Anche questa proprietà HTML CSS non funziona per ogni carattere. Solo alcuni caratteri appositamente progettati che hanno nei caratteri tipografici della loro famiglia con tratti varianti possono rendere questa proprietà.
La proprietà tratto da carattere CSS è ereditata.
I valori di Font-Stretch in CSS possono essere il prossimo:
ultra-condensed- per il font più condensato.extra-condensed- per il font secondo più condensato.condensed- per un font condensato.semi-condensed- per un font leggermente condensato.normal- valore predefinito.semi-expanded- per un font leggermente espanso.expanded- per un testo espanso.extra-expanded- per il font secondo più espanso.ultra-expanded- per il font più espanso.initial- imposta i valori predefiniti.inherit- prende i valori dal genitore.
Esempio di utilizzo.
Reniamo testi con i prossimi parametri di Font-Stretch.
| Proprietà | Valore per il testo 1 | Valore per il testo 2 | Valore per il testo 3 |
|---|---|---|---|
| font-stretch: | condensed; | normal; | expanded; |
Sintassi:
1// text 1
2.text1 {
3 font-stretch: condensed;
4}
5// text 2
6.text2 {
7 font-stretch: normal;
8}
9// text 3
10.text3 {
11 font-stretch: expanded;
12}Il risultato dell’applicazione sembrerebbe così (si noti che le dimensioni del carattere e il colore sono state impostate allo stesso modo per tutti e tre i testi nel <body>).
Stile carattere CSS
Questa proprietà regola la pendenza del carattere.
La proprietà in stile carattere CSS è ereditata.
La proprietà in stile font di HTML CSS può avere i valori successivi:
normal- valore predefinito che imposta l’inclinazione normale del font.italic- contrassegna il testo in corsivo.oblique- imposta l’inclinazione del font (il font ha un’inclinazione nelle sue varianti).initial- imposta i valori predefiniti.inherit- eredita i valori dal font padre.
Esempio di utilizzo.
Respingiamo i testi con i prossimi parametri di stile dei caratteri.
| Proprietà | Valore per il testo 1 | Valore per il testo 2 | Valore per il testo 3 |
|---|---|---|---|
| font-style: | normal; | italic; | oblique; |
Sintassi:
1// text 1
2.text1 {
3 font-style: normal;
4}
5// text 2
6.text2 {
7 font-style: italic;
8}
9// text 3
10.text3 {
11 font-style: oblique;
12}Il risultato dell’applicazione sembrerà così (si noti che le dimensioni del carattere e il colore sono state impostate allo stesso modo per tutti e tre i testi nel <body>).
Potresti aver notato che i risultati per corsivo 'e oblique’ sembrano uguali. La risposta a questo è che il valore `obliquo" funziona solo quando il carattere ha un carattere tipografico obliquo e il carattere usato non ne ha uno.
Dimensione del carattere CSS
La proprietà imposta l’altezza dei glifi del carattere.
La proprietà delle dimensioni del carattere CSS è ereditata.
CSS Font-Size ha i prossimi valori:
- Dimensione assoluta: può essere
xx-small,x-small,small,medium,large,x-largeoxx-large. Il valore predefinito èmedium. - Dimensione relativa: la dimensione rispetto al font originale. Può essere
smallerolarger. Può rendere i font ancora più grandi o più piccoli di quanto consentito dalla dimensione assoluta. - Larghezza: è impostata in pixel (px) o em (em). L’em è un’unità scalabile utilizzata per i documenti web. Un em equivale alla dimensione corrente del font. Se la dimensione del font del documento è 14 pt, 1 em equivale a 14 pt. L’em viene ridimensionato in modo che 2 em equivalgano a 28 pt.
%: questo valore relativo viene calcolato in confronto al font originale. Permette di apportare modifiche più precise alla dimensione del font CSS. - Larghezza del punto di vista -vw, consente al font di adattarsi alle dimensioni della finestra del browser utilizzato. Nota che 1vw = 1% della larghezza del viewport. Se il viewport è largo 40 cm, 1vw è pari a 0,4 cm.initial- imposta i valori predefiniti.inherit- eredita i valori dal genitore.
Esempio di utilizzo.
Lì sono impostati i parametri successivi.
| Proprietà | Valore per il testo 1 | Valore per il testo 2 | Valore per il testo 3 |
|---|---|---|---|
| font-size: | 7vw; | 70px; | 2em; |
Sintassi:
1// text 1
2.text1 {
3 font-size: 7vw;
4}
5// text 2
6.text2 {
7 font-size: 70px;
8}
9// text 3
10.text3 {
11 font-size: 2em;
12}Il risultato dell’applicazione sembrerà così (si noti che il carattere e il colore sono stati impostati allo stesso modo per tutti e tre i testi nel <body>).
Carattere CSS
La proprietà CSS font viene utilizzata per accorciare il codice. Con essa, è possibile impostare tutte le altre proprietà del font in un’unica proprietà. È possibile specificare le seguenti proprietà: font-style, font-variant, font-weight, font-stretch, font-size/line-height e font-family. È anche possibile includere i valori della proprietà font-variant supportati da CSS 2.1: normal o small-caps. Consultare il paragrafo
Variante font dell’articolo
Cos’è un font? per ulteriori informazioni su questa proprietà.
Esempio di utilizzo.
Lì sono impostati i parametri successivi.
| Proprietà | Valore per il testo 1 | Valore per il testo 2 | Valore per il testo 3 |
|---|---|---|---|
| font: | 6vw Arial; | 60pt Courier, monospace; | - |
Sintassi:
1// text 1
2.text1 {
3 font: 6vw Arial;
4}
5// text 2
6.text2 {
7 font: 60pt Courier, monospace;
8}
9// text 3
10.text3 {
11}Il risultato dell’applicazione di questi parametri è nell’immagine seguente (si noti che il colore è impostato lo stesso per tutti e tre i testi nel <dody>). Poiché non abbiamo impostato alcun valori per il terzo testo, è stato reso nei parametri predefiniti.
Sintesi del carattere CSS
Questa proprietà HTML CSS definisce se è consentito che i browser sintetizzano stili di carattere semibold o obliquo se sono assenti nella famiglia dei caratteri. Quindi, se non sono specificati Font-Weight e Font-Style, i browser non devono sintetizzare stili semibold o obliqua.
La proprietà di sintesi di font è ereditata.
Per il parametro di sintesi del carattere CSS può essere impostato i valori successivi:
none- proibisce la sintesi.weighto/estyle- le proprietà specificate possono essere sintetizzate.initial- imposta i valori predefiniti.inherit- prende i valori dal genitore.
Esempio di utilizzo.
Lì sono impostati i parametri successivi.
| Proprietà | Valore per il testo 1 | Valore per il testo 2 | Valore per il testo 3 |
|---|---|---|---|
| font-synthesis: | weight; | style; | none; |
| font-weight: | 900; | - | 900; |
| font-style: | - | oblique; | oblique; |
Sintassi:
1// text 1
2.text1 {
3 font-synthesis: weight;
4 font-weight: 900;
5}
6// text 2
7.text2 {
8 font-synthesis: style;
9 font-style: oblique;
10}
11// text 3
12.text3 {
13 font-synthesis: none;
14 font-weight: 900;
15 font-style: oblique;
16}Il risultato dell’applicazione renderebbe il rendering come è mostrato nell’immagine successiva (si noti che il colore è impostato lo stesso per tutti e tre i testi nel <body>). Mentre impostiamo il valore “Nessuno” per il terzo testo, è stato reso nei parametri predefiniti.
Pile di carattere##
Le pile di caratteri si riferiscono a un elenco di caratteri definiti nei fogli di stile a cascata (CSS) utilizzati come opzioni di fallback se un particolare carattere non riesce o assente sul dispositivo o sul sistema di un utente. Garantiscono che i web designer possano mantenere coerenza nella tipografia su piattaforme e browser diversi.
Per specificare le famiglie di caratteri in CSS, è comune definire uno stack di carattere elencando più caratteri in ordine di preferenza. Se la prima opzione non è disponibile, il browser tenta di utilizzare quello successivo nello stack fino a quando non viene trovata un’opzione di lavoro.
Diamo un’occhiata a un esempio di uno stack di carattere per specificare le famiglie di carattere in CSS. Qui il carattere preferito delle partire dello stack è “Helvetica Neue”. Se non è disponibile, l’opzione successiva provata da un browser sarà “Arial”. Se anche “Arial” fallisce, il browser tornerà al carattere generico sans-serif.
1 Font-Family: "Helvetica Neue", Arial, sans-serif;Specificare una famiglia di carattere generici, come “sans-serif”, “serif” o “monospace”, poiché l’ultima opzione nello stack di carattere è considerata buona pratica. Assicura che il browser abbia sempre un carattere di fallback adatto da visualizzare nel caso in cui nessuno dei caratteri preferiti sia disponibile.
Caratteri Web-Safe
I caratteri Web-Safe, noti anche come caratteri di sistema o caratteri predefiniti, sono una raccolta di caratteri comunemente disponibili su vari sistemi operativi e dispositivi. Sono considerati sicuri da utilizzare nel web design in quanto ampiamente supportati e probabilmente saranno presenti sui dispositivi degli utenti.
All’inizio dello sviluppo web, i progettisti avevano opzioni di carattere limitate a causa della variabilità della disponibilità dei caratteri su diversi sistemi. Di conseguenza, hanno fatto affidamento su un set centrale di caratteri che erano ampiamente installati sulla maggior parte dei computer.
Ecco alcuni esempi di famosi caratteri Web-Safe:
- Arial
- Helvetica
- Times New Roman
- Georgia
- Courier Nuovo
- Verdana
- Tahoma
- Trebuchet MS
Sono spesso indicati come “caratteri di fallback” e specificati nelle pile di carattere perché sono considerati una scelta sicura se un carattere preferito non è disponibile.
Tuttavia, con i progressi delle tecnologie Web e l’uso diffuso di caratteri personalizzati attraverso servizi come Google Fonts e TypeKit, la dipendenza dai caratteri Web-Safe è diminuita. Ora i web designer hanno una maggiore flessibilità e una gamma più ampia di caratteri per migliorare il fascino visivo dei loro siti Web.
Come usare caratteri esterni in CSS?
Per utilizzare i caratteri esterni in CSS, è possibile utilizzare la regola @font-face. Ti consente di specificare un carattere personalizzato e renderlo accessibile alla tua pagina web. Diamo un’occhiata a come utilizzare caratteri esterni in CSS:
- Ottieni i file di carattere:
- Trova i file nei formati di carattere come WOFF, WOFF2, TTF o EOT.
- È possibile ottenere i file font da un servizio di carattere come Google Fonts o acquistarli da qualsiasi fonte affidabile.
- Carica i file del carattere:
- Carica i file font sul tuo server Web o una cartella designata all’interno del progetto.
- Definire la regola della faccia di font @:
- Fallo nel tuo file CSS, per specificare il nome della famiglia dei caratteri e fornire il percorso ai file di carattere specificare il percorso ai file di carattere e ai rispettivi formati. Includi più formati per supportare browser diversi.
Ecco un esempio di tale operazione:
1 @font-face {
2 font-family: 'MyCustomFont';
3 src: url('path-to-fonts/MyCustomFont.woff2') format('woff2'),
4 url('path-to-fonts/MyCustomFont.woff') format('woff');
5 /* Add additional formats if available */
6 }- Applica il carattere: Quando hai definito la regola della faccia di font @ @font, puoi utilizzare il carattere personalizzato specificando la proprietà del carattere nelle regole CSS come nell’esempio seguente. Qui il carattere personalizzato chiamato “MyCustomfont” viene applicato all’elemento corporeo. Se il carattere personalizzato non è disponibile, il browser tornerà a un carattere generico sans-serif.
1 body {
2 Font-Family: 'MyCustomfont', sans-serif;
3 }- Test e verifica le pagine Web su diversi browser e dispositivi.
Alcune parole sulla tipografia reattiva
La tipografia reattiva è la pratica della progettazione e dell’implementazione della tipografia su un sito Web, quindi si adatta e si adatta a diverse dimensioni e dispositivi dello schermo. Implica fattori come dimensioni del carattere, lunghezza della linea e spaziatura per ottimizzare l’esperienza di lettura su dimensioni e orientamenti dello schermo diversi.
Ecco alcuni aspetti chiave della tipografia reattiva:
Invece di utilizzare i caratteri fissi di dimensioni, la tipografia reattiva impiega unità relative come percentuali, EMS o REM per ridimensionare i testi in modo proporzionale in base alle dimensioni dello schermo o alla vista.
La tipografia reattiva è spesso implementata insieme a query multimediali, che consentono l’adattamento di stili di carattere in base a larghezze di schermo specifiche o capacità di dispositivo. Ciò consente regolazioni tipografiche personalizzate per diversi punti di interruzione.
Le unità di visualizzazione CSS, come VW (larghezza di visualizzazione) e VH (altezza di visualizzazione), sono utilizzate per dimensioni dei caratteri rispetto alle dimensioni del Viewport. Questo approccio garantisce che le dimensioni dei caratteri si adattino senza intoppi mentre l’utente ridimensiona la finestra del browser o si interrompe tra i dispositivi.
La tipografia reattiva considera la lunghezza ottimale della linea (il numero di caratteri per riga) per la leggibilità. Le linee più lunghe su schermi più grandi possono essere gestite regolando i margini o applicando larghezze massime. Inoltre, l’altezza della linea (spaziatura verticale tra le linee) è attentamente considerata per evitare il testo angustato o troppo distanziato.
Con uno spazio sullo schermo limitato su dispositivi più piccoli, è importante stabilire una chiara gerarchia tipografica. I progettisti devono garantire che i titoli, i sottotitoli e il testo del corpo siano adeguatamente differenziati per facilitare la lettura.
Dai la priorità all’accessibilità considerando i rapporti di contrasto tra testo e background, fornendo ampie spaziature per gli utenti con disabilità visive e consentendo regolazioni flessibili per le dimensioni del carattere per ospitare diverse preferenze dell’utente.
Conclusione
Il carattere CSS è uno dei blocchi chiave nello sviluppo di interfacce con CSS. La maggior parte del contenuto della maggior parte delle pagine Web è il contenuto di testo, quindi senza imparare questa proprietà, questo contenuto non avrà mai un aspetto di alta qualità. Avrà meno leggibilità, scalabilità, ecc.
Alcune proprietà sono facili da applicare a qualsiasi font, ma altre richiedono un font speciale che supporti la variazione della proprietà. Ad esempio, il font Inconsolata ha 8 varianti di font-weight, mentre la maggior parte dei font può essere solo normal o bold. Se hai in mente un font da utilizzare ma non lo hai sul tuo dispositivo, puoi provare a cercarlo e scaricarlo da un’applicazione web gratuita di Aspose. Inoltre,
Font viewer ti fornirà le informazioni necessarie sul font di cui potresti aver bisogno durante lo sviluppo.