font-family<\/em> nel CSS ci permette di scegliere un font specifico da utilizzare per un elemento, per esempio i paragrafi o i titoli h2 delle nostre pagine web.<\/p>\n\n\n\nLa propriet\u00e0 si usa in questo modo: font-family: value-1, value2;<\/p>\n\n\n\n
Ecco un esempio semplice:<\/p>\n\n\n\n
p {\n\n font-family: \"Times New Roman\",serif;\n\n}<\/code><\/pre>\n\n\n\nUna nota importante sulla sintassi: se il nome del font contiene degli spazi, come nell\u2019esempio qui sopra, bisogna inserire il nome tra virgolette.<\/p>\n\n\n\n
Con le regole definite qui sopra stiamo dicendo che vogliamo che il font utilizzato per i paragrafi sia Times New Roman<\/em> e stiamo specificando serif<\/em> come opzione di fallback nel caso in cui il font da noi specificato non sia disponibile sul dispositivo.<\/p>\n\n\n\nIn pratica la propriet\u00e0 font-family<\/em> ci permette di inserire pi\u00f9 valori che verranno considerati in maniera prioritaria <\/strong>a partire dal primo. <\/p>\n\n\n\nIl primo font specificato sar\u00e0 quello che verr\u00e0 utilizzato con priorit\u00e0, dopodich\u00e9 se il primo font non fosse disponibile, il browser andr\u00e0 a cercare il secondo della lista e cos\u00ec via. In genere si pu\u00f2 specificare una lista di font e inserire per ultimo il font generico ad esempio serif, sans-serif, monospace e cos\u00ec via. Questa lista di font \u00e8 chiamata font stack<\/em>.<\/p>\n\n\n\nNon c\u2019\u00e8 un vero e proprio limite ai font che si possono specificare in questa lista, anche se in genere si tende a usarne un massimo di 3 o 4. La raccomandazione generale \u00e8 sempre di inserire un font generico<\/strong> alla fine per specificare la famiglia di font di appartenenza.<\/p>\n\n\n\nIn questa gif puoi vedere come cambia l’aspetto del testo quando viene modificato il font. I font che abbiamo usato in successione sono: Tahoma, Verdana, Segoe UI, sans-serif. <\/p>\n\n\n\nTimes New Roman<\/h3>\n\n\n\n Times New Roman <\/em>\u00e8 uno dei font pi\u00f9 utilizzati e conosciuti al mondo. Si tratta di un font serif<\/em> (con le grazie) che \u00e8 stato ideato per il quotidiano The Times<\/em>. Dalla sua prima apparizione, che risale al 1932, questo carattere \u00e8 stato poi sempre pi\u00f9 utilizzato per libri e riviste.<\/p>\n\n\n\nPu\u00f2 essere utilizzato in questo modo specificando i font fallback:<\/p>\n\n\n\n
font-family: \"Times New Roman\", Times, serif;<\/code><\/pre>\n\n\n\nGeorgia<\/h3>\n\n\n\n Il carattere serif Georgia<\/em> nasce per rispondere all\u2019esigenza di garantire un\u2019elevata leggibilit\u00e0 su schermi piccoli<\/strong>. Questo font \u00e8 stato progettato per Microsoft ed \u00e8 apparso per la prima volta nel 1993. Si tratta di una delle alternative pi\u00f9 utilizzate al font Times New Roman.<\/p>\n\n\n\nEcco un esempio di utilizzo con font fallback:<\/p>\n\n\n\n
font-family: Georgia, \"Times New Roman\", Times, serif;<\/code><\/pre>\n\n\n\nGaramond<\/h3>\n\n\n\n Garamond in realt\u00e0 non \u00e8 un solo font ma include un gruppo di caratteri serif attribuibili a un incisore del XVI secolo, Claude Garamond. Si tratta di un font classico utilizzato soprattutto nei libri per la sua alta leggibilit\u00e0.<\/p>\n\n\n\nIl font ha avuto molte versioni tra cui il carattere Simoncini Garamond che \u00e8 stato utilizzato come carattere predefinito per l\u2019editoria<\/strong> in Italia, tra gli editori che lo hanno utilizzato ricordiamo Rizzoli e Feltrinelli, oltre a Einaudi con una versione leggermente diversa che \u00e8 stata chiamata Einaudi Garamond.<\/p>\n\n\n\nUn esempio di font stack di Garamond:<\/p>\n\n\n\n
font-family: Garamond, Baskerville, serif;<\/code><\/pre>\n\n\n\nArial<\/h3>\n\n\n\n Arial \u00e8 uno dei font sans-serif tra i pi\u00f9 diffusi, \u00e8 molto simile a Helvetica, un altro font senza grazie e, infatti, spesso i due caratteri vengono confusi. Arial \u00e8 un font contemporaneo molto utilizzato per i siti web.<\/p>\n\n\n\nLe versioni precedenti di Office 2007 utilizzava Arial come font di default per diverse applicazioni tra cui Excel e Power Point, mentre successivamente il font standard \u00e8 diventato Calibri. Attualmente Arial \u00e8 il font usato come predefinito per Google Docs<\/strong>.<\/p>\n\n\n\nUn esempio di utilizzo di Arial come font:<\/p>\n\n\n\n
font-family: Arial, Helvetica, sans-serif;<\/code><\/pre>\n\n\n\nVerdana<\/h3>\n\n\n\n Verdana \u00e8 un font sans-serif disegnato per Microsoft ed \u00e8 stato creato appositamente per essere leggibile <\/strong>anche su schermi a basse risoluzioni. Per garantire una maggiore leggibilit\u00e0, Verdana ha diverse caratteristiche che lo contraddistinguono, ad esempio \u00e8 facile riconoscere la cifra 1 dalla l (elle<\/em>) minuscola dalla i maiuscola.<\/p>\n\n\n\nEsempio dell\u2019utilizzo di Verdana con font fallback:<\/p>\n\n\n\n
font-family: Verdana, Geneva, sans-serif;<\/code><\/pre>\n\n\n\nTahoma<\/h3>\n\n\n\n Tahoma \u00e8 un carattere sans-serif<\/strong> sviluppato per Micosoft. A differenza di altri caratteri senza grazie, Tahoma ha la particolarit\u00e0 di avere lettere simili facilmente distinguibili come la I maiuscola dalla elle minuscola. \u00c8 stato il font di default per Windows 2000 e XP.<\/p>\n\n\n\nEsempio di utilizzo di Tahoma:<\/p>\n\n\n\n
font-family: Tahoma, Verdana, sans-serif;<\/code><\/pre>\n\n\n\nTrebuchet MS<\/h3>\n\n\n\n Trebuchet MS \u00e8 un font sviluppato per Microsoft nel 1996. Dopo essere stato incluso nella lista dei \u201cCore fonts for the Web\u201d di Microsoft, \u00e8 stato largamente utilizzato come font principale delle pagine web.<\/p>\n\n\n\nQuesto font \u00e8 caratterizzato da una leggibilit\u00e0 alta ed ha caratteristiche distintive come la “l” curvata che la rende facilmente distinguibile dalla “i” maiuscola.<\/p>\n\n\n\n
Esempio dell\u2019uso del font:<\/p>\n\n\n\n
font-family: \"Trebuchet MS\", Helvetica, sans-serif;<\/code><\/pre>\n\n\n\nCourier New<\/h3>\n\n\n\n Courier New \u00e8 un carattere monospazio <\/strong>creato per IBM. Viene spesso utilizzato come font predefinito per documentazione tecnica, sceneggiature e per i programmi di posta elettronica.<\/p>\n\n\n\nEsempio di utilizzo:<\/p>\n\n\n\n
font-family: \"Courier New\", Courier, monospace;<\/code><\/pre>\n\n\n\nBrush Script MT<\/h3>\n\n\n\n Brush Script MT \u00e8 un font corsivo che imita la scrittura a mano<\/strong>. Trattandosi di un font particolare viene spesso utilizzato in titoli o slogan, ma raramente per testi lunghi vista la sua scarsa leggibilit\u00e0.<\/p>\n\n\n\nEsempio di utilizzo del font:<\/p>\n\n\n\n
font-family: \"Brush Script MT\", cursive;<\/code><\/pre>\n\n\n\nConclusioni<\/h2>\n\n\n\n Abbiamo visto cosa sono i font web safe e perch\u00e9 sono importanti. <\/p>\n\n\n\n
Adesso sai che quando si tratta di scegliere quale font usare per un sito web, non bisogna solo fare attenzione allo stile e alla leggibilit\u00e0<\/strong>, ma anche assicurarsi che il font sia disponibile su tutti i dispositivi in modo che venga visualizzato correttamente<\/strong>. Ed \u00e8 proprio qui che entrano in gioco i font sicuri per il web e i font di fallback. <\/p>\n\n\n\nConoscevi gi\u00e0 l’importanza dei font web safe? Quali font utilizzi sul tuo sito? Facci sapere con un commento.<\/p>\n","protected":false},"excerpt":{"rendered":"
Ti stai chiedendo quali font utilizzare il tuo sito e ti sei imbattuto nel termine font web safe? In questo approfondimento scoprirai tutto quello che c’\u00e8 da sapere. Iniziamo col chiarire che i font web safe sono quei caratteri gi\u00e0 installati e disponibili sulla maggior parte dei dispositivi. Scegliere questi font sul nostro sito, quindi, […]<\/p>\n","protected":false},"author":3,"featured_media":63514,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[27],"tags":[],"class_list":["post-51964","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-generale"],"acf":[],"_links":{"self":[{"href":"https:\/\/supporthost.com\/it\/wp-json\/wp\/v2\/posts\/51964","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/supporthost.com\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/supporthost.com\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/supporthost.com\/it\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/supporthost.com\/it\/wp-json\/wp\/v2\/comments?post=51964"}],"version-history":[{"count":2,"href":"https:\/\/supporthost.com\/it\/wp-json\/wp\/v2\/posts\/51964\/revisions"}],"predecessor-version":[{"id":63515,"href":"https:\/\/supporthost.com\/it\/wp-json\/wp\/v2\/posts\/51964\/revisions\/63515"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/supporthost.com\/it\/wp-json\/wp\/v2\/media\/63514"}],"wp:attachment":[{"href":"https:\/\/supporthost.com\/it\/wp-json\/wp\/v2\/media?parent=51964"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/supporthost.com\/it\/wp-json\/wp\/v2\/categories?post=51964"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/supporthost.com\/it\/wp-json\/wp\/v2\/tags?post=51964"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}