Lezione gratuita dal corso Web Development
Il font è lo stile che viene utilizzato per le lettere che compongono il testo.
Questo questo termine utilizzato anche in editoria, quindi, è proprio il termine tecnico per rappresentare lo stile appunto della delle lettere dei caratteri che compongono il testo.
Chiaramente il CSS ci permette di andare a modificare l'aspetto del testo, quindi, ad esempio possiamo cambiare il tipo o il nome del font.
Quindi se abbiamo in mente un font specifico, possiamo andare a utilizzare quello specifico font oppure semplicemente cambiare la tipologia.
Quindi, ad esempio un font con le grazie o senza le grazie possiamo andare a modificare la dimensione del font, quindi se vogliamo il font più grande o più piccolo o lo spessore, ad esempio.
Quindi vediamo subito un esempio su queste prime cosine.
Qui affianchiamo sempre il nostro browser, quindi abbiamo il nostro paragrafo.
Abbiamo già visto come cambiare colore.
Ora andiamo a vedere le proprietà specifiche per il font, quindi ad esempio font-family se noi andiamo a compilare con un font Arial, ad esempio, che succede che all'interno del mio browser non vedrò più il testo rappresentato con le grazie, ma aggiorno la pagina vedrò il testo visualizzato proprio con il carattere Arial è importante andare a scegliere dei font che siano web safe, come si dice in gergo dei font, che sono universali e che il browser è in grado sicuramente di visualizzare.
Quindi evitiamo quei font che magari sono specifici che abbiamo installato noi nel nostro computer, perché probabilmente il nostro, il nostro utente, chi visualizzerà la pagina non avrà lo stesso font é installato Quinn di che cosa si fa? Spesso? Oltre a specificare il nome di un font, è possibile andare a indicare la tipologia generica, quindi una famiglia sans-serif in modo che se il primo non è disponibile, quindi ad esempio, aria non è disponibile, viene utilizzato un qualsiasi fonte senza grazie.
In questo caso il giorno la pagina non c' è alcuna differenza, perché l'aria è sempre disponibile.
Però nel caso in cui andasse a scegliere un font più particolare ci sarebbe il fullback Delson Sheriff.
Poi abbiamo visto il font-size.
Questo font-size può essere espresso solitamente con i pixel, quindi se ad esempio inserisco dodici pixel al giorno al mio browser e vedo che il testo è un pochettino più piccolo, se anziché dodici metto venti.
Chiaramente il font è un pochettino più grande, quindi in questo modo noi possiamo andare a modificare il testo e visualizzarlo graficamente come ci piace.
Quindi, quando parlavamo dei titoli che dicevamo, utilizziamo i titoli in base alla loro importanza, non al loro aspetto grafico.
Questo è il modo in cui possiamo andare a modificare il titolo.
Quindi se ad esempio io voglio andare a inserire un account, il titolo principale nella mia pagina, questo chiaramente verrà rappresentato con un carattere più grande rispetto al testo in grassetto.
Notiamo come il titolo non abbia preso il font-family Arial, perché il mio selettore va a selezionare solamente i paragrafi.
Se poi io vado a inserire un titolo, accadute titolo secondario come significato, ma voglio che venga visualizzato più grande graficamente rispetto al titolo h una posso andare a creare un selettore per il mio h due e aumentare il suo font-size.
Posso mettere ad esempio quaranta pixel che è molto molto grande.
Aggiorno la mia pagina é chiaramente verrà fuori più grande rispetto al titolo principale, quindi è importante che io scelga i tag in base al significato semantico e non al loro aspetto grafico.
All'aspetto grafico ci pensa appunto il css un'altra cosa sempre riguardante il font che possiamo andare a modificare eh La dimensione in termini di grassetto o normale.
Il font-weight si può inserire come numero, di solito è un centinaio, oppure normal bold o leader, eccetera.
Quindi se noi andassimo a inserire ad esempio Novecento, che è il massimo numero che io posso inserire adesso, vedrei il mio paragrafo in grassetto.
Sempre tornando al discorso dei font, è importante appunto che il mio font sia sempre disponibile, altrimenti il mio utente vedrà un font differente.
Quello che si fa spesso è affidarsi ai Google font, Quindi Google Font Che cosa sono? Sono un grande portale di font disponibile gratuitamente, da cui si può scegliere il font che più ci piace e poterlo inserire nella nostra pagina.
Quindi andiamo a visitare i phon di Google.
Quindi qua si apre già un'anteprima dei principali fonti utilizzati, ma possiamo anche ricercarlo.
Possiamo cercarli per categoria, quindi quelle grazie senza grazie.
Altre tipologie di font che sono piu' calligrafici è poi possiamo scegliere in base alla lingua.
Ci sono chiaramente certe lingue che hanno bisogno di simboli speciali che non sono nell'alfabeto, latino, eccetera eccetera.
Quindi altre proprietà, Quindi un fonte più largo, più stretto, più spaziato, eccetera eccetera.
Possiamo cercarlo per nome e possiamo anche scrivere un qualcosa testo di anteprima per vedere ad esempio, come si presenta con un testo nostro personalizzato.
Il font più utilizzati sono sono molteplici Roboto pen sans lato Montserrat sono fonte che trovate spessissimo nei siti web.
A me piace molto, ad esempio unito è un font molto semplice, molto carino.
Quindi, cliccando sul font si può scegliere la dimensione che vogliamo andare a utilizzare.
Vediamo che Google Font ci da' a disposizione.
Google Font ci da' a disposizione diverse dimensioni, quindi da un duecento, duecento corsivo, trecento e via dicendo fino ad arrivare al Novecento corsivo.
Non andiamo a importarli tutti perché ogni volta che importiamo un font la pagina si appesantisce, quindi andiamo a scegliere solo quelli che effettivamente useremo quelli che ci servono.
Quindi ad esempio possiamo utilizzare un quattrocento che regular, quindi è una dimensione normale.
E se poi dovesse servirci un bold? Quindi ho un settecento ottocento, usiamolo ottocento quindi cliccando su select style quando vogliamo scegliere il font che vogliamo utilizzare nella pagina compare sulla destra.
Questo riquadro in questo riquadro è riportato il link da copiare e incollare all'interno del LED della nostra pagina per andare proprio a importare questi google font e poi ci aiuta già scrivendo anche la proprietà.
Quindi font-family due punti unito che è proprio il nome del font virgola sans-serif secondo il principio che dicevamo poco fa.
Quindi ora copio il link, lo inserisco all'interno del mio ed e poi al posto di font-family Arial sans-serif vado a scrivere unito, vado a scrivere munito sans-serif quindi quello che anche Google mi suggeriva Aggiorno la mia pagina e voilà.
Quindi adesso vediamo che il fonte è leggermente diverso rispetto al Real di poco fa.
Cliccando sul paragrafo mi compare anche la mia regola di stile.
Io non ho importato il novecento, quindi lui non sta utilizzando veramente il novecento sta utilizzando quello che ci si avvicina di più.
Io ho importato il quattrocento e l'ottocento, quindi in questo caso starà utilizzando l' ottocento.
Se io metto invece quattrocento sarà in regola.
Eccolo qui
Learnn è la piattaforma online che ti aiuta a 360 gradi a crescere nel digitale. Sviluppa competenze con oltre 220 corsi, condividi i tuoi risultati, fai networking con otre 120.000 professionisti/e e oltre 300 aziende.
Vogliamo cambiare l’Italia, una persona alla volta.
Per farlo ci proponiamo di democratizzare l’apprendimento e accelerare la crescita di persone, idee e aziende attraverso strumenti tecnologici a supporto di qualsiasi professionista.
Learnn prevede un piano totalmente gratuito (Free) che ti permette di iniziare qualsiasi corso che abbiamo su Learnn.
Per chi volesse finire i corsi, ottenere certificazioni e connettersi con professionisti e aziende, Learnn Pro permette di avere accesso illimitato a tutto questo. Il corso di Learnn Pro è 9.99 euro / mese e puoi disdire quando vuoi.
Per i team di aziende abbiamo anche un Piano Team con oltre 300 clienti aziendali.
Potrai seguire i contenuti da computer, tablet e smartphone.
Scarica l’App iOS/Android Learnn e segui i contenuti in modalità video, audio e testo.
Learnn ha un piano gratuito che ti permette di accedere all 40% di ogni corso in maniera gratuita e solo con la tua email.
Learnn offre sia un piano gratuito con accesso limitato ai contenuti, sia un piano PRO del costo di soli 9.99 euro al mese con cui potrai avere accesso a tutti i nostri contenuti senza limiti o sorprese.
Una volta completata l’iscrizione sarà possibile gestire i propri dati e disdire in qualsiasi momento e in completa autonomia.
No, non offriamo certificazioni, facciamo di meglio.
Man mano che completi corsi potrai verificare le tue competenze e condividerle sul tuo profilo LinkedIn o CV.
Inoltre abbiamo sviluppato una feature chiamata Profile attraverso il quale otterrai un link personale per mostrare in tempo reale tutti i contenuti da te completati e molto altro.
Immagine personale, username, badge, link esterni e molto altro.
Crea una vera e propria sales page dove il prodotto in vendita sono le tue competenze.
Se avessi altre domande puoi usare la live chat qui di fianco.
Per partnership compila questo form
La nostra vision è rendere l'Italia famosa nel mondo per l'esecuzione.
La missione di Learnn
è accelerare la crescita di ogni individuo rendendo accessibili conoscenza, opportunità e tecnologia per avere un impatto positivo sul mondo e sugli altri.
Tutto incluso (come Netflix), IVA inclusa, nessuna sorpresa o addebito indesiderato.
Disdici quando vuoi, in 1 click.
Scegli di migliorare ogni giorno per 12 mesi senza interruzioni scegliendo il piano annuale.
In un unico pagamento annuale
Disdici quando vuoi, in 1 click.
Con l’abbonamento otterrai:
Consuma i +200 corsi e webinar di Learnn da webapp o app iOS e Android, in formato video, audio o testo.
Con l'abbonamento a Learnn hai accesso a tutto (proprio tutto) ciò che contiene la piattaforma.
Ogni mese registriamo nuovi corsi su tutto cio di cui potresti avere bisogno nel mondo digitale.
Con l'app Learnn trasformi ogni momento di vuoto in un'occasione di apprendimento.
Scarica tutto il materiale che ti serve e utilizza i moduli riassuntivi per fissare i concetti.
Ogni settimana nuove offerte di lavoro da parte di tantissime aziende che operano nel mondo digitale.