/* * vc-caratteri.css - Titillium Web servito dal tema * ================================================= * * PERCHE ESISTE QUESTO FILE * * Fino a ieri ogni pagina del sito chiedeva i caratteri a Google: un * foglio su fonts.googleapis.com e poi i file su fonts.gstatic.com. * Due ragioni per smettere, in ordine di importanza. * * 1. Riservatezza. Il sito e di un ente pubblico. Ogni visita, di * chiunque, faceva arrivare a Google l'indirizzo IP del visitatore * e la pagina da cui partiva la richiesta, senza che nessuno avesse * chiesto nulla e senza alcun modo di rifiutare. In Europa i Garanti * si sono gia pronunciati su questo schema. Servendo i file dal * dominio del Comune, quel dato non esce piu. * * 2. Velocita. Spariscono due connessioni verso domini terzi * (risoluzione DNS e handshake TLS per ciascuno) che si aprivano * prima che una riga di testo potesse comparire. Ora i caratteri * arrivano dalla stessa connessione che sta gia servendo la pagina. * * COSA NON CAMBIA * * I file .woff2 qui sotto sono gli stessi identici byte che Google * consegnava: scaricati da fonts.gstatic.com, non rigenerati. Stesso * disegno, stessa versione (v19 dei file, Version 1.002 del carattere), * stessa suddivisione in sottoinsiemi, stessi unicode-range, stesso * font-display. Il visitatore riceve lo stesso carattere di prima da un * indirizzo diverso: non c'e nulla che possa renderlo diverso. * * PERCHE SOLO woff2, SENZA UN woff DI SCORTA * * woff2 e capito da Chrome dal 2014, Firefox dal 2015, Safari e Edge * dal 2016. Restano fuori solo Internet Explorer 11, Safari 9 e * l'Android Browser 4. A quei browser Google serviva davvero un woff * (verificato interrogando l'endpoint con i loro user agent), quindi * per loro qualcosa cambia: vedranno il carattere di sistema invece di * Titillium. E accettabile perche quei browser non riescono comunque a * rendere questo sito: i fogli del tema contengono 667 usi di var(--..) * e le custom properties CSS non esistono in IE11, percio da F4 in poi * quasi tutto il lavoro su spaziature, colori e bersagli tattili gia * non si applica. Aggiungere un woff vorrebbe dire raddoppiare il peso * nel deposito per curare un difetto tipografico dentro una pagina gia * rotta. Il visitatore non paga comunque nulla per i formati che non * usa: il browser ne scarica uno solo, quello che sa leggere. * * PERCHE SEI TAGLI E NON UNDICI * * L'URL di Google ne chiedeva undici: 200, 300, 400, 600, 700 e 900 * tondi, piu 200, 300, 400, 600 e 700 corsivi. I fogli del tema, quelli * dei plugin attivi e il contenuto di tutte le 84 pagine pubbliche * usano soltanto 400, 600 e 700. E misurato, non stimato: nessuna * regola dichiara 200, 300 o 900, e nessuna pagina porta uno stile in * linea che li chieda. I corsivi servono tutti e tre perche em e i * ereditano il peso del contesto: un dentro un titolo a 600, o * dentro uno a 700, pretende il corsivo di quel peso. Se * mancasse, il browser prenderebbe il corsivo a 400 e ci applicherebbe * sopra un neretto finto, piu grasso e piu sporco del disegno vero. * * PERCHE NIENTE local() * * Non si dichiara local('Titillium Web'). Se un visitatore avesse una * copia installata sul suo computer potrebbe essere una versione * diversa da questa, e la pagina renderebbe diversa da macchina a * macchina. Meglio usare sempre e solo il file servito dal tema. * Anche Google, nell'endpoint css2, ha smesso di dichiararlo. * * PERCHE unicode-range RESTA * * Divide ogni taglio in due file, latin e latin-ext, e dice al browser * quali caratteri ci sono dentro. Serve a due cose. Il browser scarica * solo il file che gli serve davvero: oggi, su questo sito, latin-ext * non viene mai richiesto, perche nessuna delle 84 pagine contiene un * carattere di quel gruppo. E soprattutto il browser non prova nemmeno * a usare Titillium per il cinese. Toglierlo cambierebbe il * comportamento, percio e ricopiato parola per parola da Google. * * IL CINESE * * Titillium Web non contiene ideogrammi: zero glifi CJK, verificato * nella tabella cmap dei file consegnati. Prima e dopo, il testo cinese * non e mai stato reso con Titillium. Il browser scende al termine * successivo della pila dichiarata in vc-tokens.css e in style.css, * cioe al sans serif di sistema: Microsoft YaHei su Windows, PingFang * SC su Apple, Noto Sans CJK su Android. Nulla di questo cambia, perche * qui non si tocca nessuna dichiarazione font-family. * * LICENZA * * Titillium Web e distribuito con la SIL Open Font License 1.1. * Copyright (c) 2009-2011 by Accademia di Belle Arti di Urbino and * students of MA course of Visual design. Some rights reserved. * * La clausola 2 impone che ogni copia ridistribuita porti con se la * nota di copyright e il testo della licenza. I file .woff2 contengono * al loro interno la nota di copyright e il rimando a * http://scripts.sil.org/OFL, ma non il testo completo: il campo * nameID 13 e vuoto. Per questo il testo integrale sta in * library/fonts/OFL.txt e deve restare li, e viaggiare con i font ogni * volta che il tema viene copiato. La licenza non chiede nessuna * attribuzione sulle pagine del sito; anzi, la clausola 4 vieta di * usare il nome degli autori per farne promozione, percio non si mette * nessun credito tipografico a video. * * DIPENDENZE * * Nessuna. Questo foglio dichiara solo @font-face: non applica nessuno * stile a nessun elemento, quindi non entra in conflitto con niente, * non ha bisogno di forzature con important e non ha un posto obbligato * nella cascata. Conviene pero emetterlo presto, perche il browser possa * cominciare a scaricare i caratteri il prima possibile. * * PERCORSI * * Le url() sono relative a questo file, che sta in library/css/: da qui * ../fonts/ e library/fonts/. Stessa convenzione gia usata da style.css * per metaplus. */ /* --------------------------------------------------------------------- font-display: swap E il valore che il sito ha gia oggi: l'URL di Google finiva con &display=swap e tutti e 22 i blocchi serviti lo dichiaravano. Si tiene identico apposta. Vuol dire: mostra subito il carattere di sistema e sostituiscilo appena Titillium e pronto. Il testo non sparisce mai, che e il difetto piu visibile di block e di fallback. Non si sceglie optional perche a molti visitatori, alla prima visita, lascerebbe l'intera pagina nel carattere di sistema: quello si che sarebbe un cambiamento a vedersi. Rispetto a ieri lo scambio si nota di meno, non di piu: i file arrivano dalla connessione gia aperta, senza DNS e TLS verso gstatic, quindi la finestra in cui si vede il ripiego e piu breve. --------------------------------------------------------------------- */ /* === Regular 400, tondo e corsivo === Peso di base del testo corrente: html, body, p e var(--vc-peso-normale, 400). Il corsivo dello stesso peso serve a em e i annidati dentro un testo di questo peso: senza, il browser sintetizzerebbe un neretto finto invece di usare il disegno vero. === */ @font-face { font-family: 'Titillium Web'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/titillium-web-400-normal-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Titillium Web'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/titillium-web-400-normal-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Titillium Web'; font-style: italic; font-weight: 400; font-display: swap; src: url(../fonts/titillium-web-400-italic-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Titillium Web'; font-style: italic; font-weight: 400; font-display: swap; src: url(../fonts/titillium-web-400-italic-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* === SemiBold 600, tondo e corsivo === var(--vc-peso-medio, 600), 27 usi nei fogli: titoli di scheda, voci di menu, etichette. Il corsivo dello stesso peso serve a em e i annidati dentro un testo di questo peso: senza, il browser sintetizzerebbe un neretto finto invece di usare il disegno vero. === */ @font-face { font-family: 'Titillium Web'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/titillium-web-600-normal-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Titillium Web'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/titillium-web-600-normal-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Titillium Web'; font-style: italic; font-weight: 600; font-display: swap; src: url(../fonts/titillium-web-600-italic-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Titillium Web'; font-style: italic; font-weight: 600; font-display: swap; src: url(../fonts/titillium-web-600-italic-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* === Bold 700, tondo e corsivo === La parola chiave bold e var(--vc-peso-grassetto, 700): , , titoli in evidenza. Il corsivo dello stesso peso serve a em e i annidati dentro un testo di questo peso: senza, il browser sintetizzerebbe un neretto finto invece di usare il disegno vero. === */ @font-face { font-family: 'Titillium Web'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/titillium-web-700-normal-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Titillium Web'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/titillium-web-700-normal-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Titillium Web'; font-style: italic; font-weight: 700; font-display: swap; src: url(../fonts/titillium-web-700-italic-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Titillium Web'; font-style: italic; font-weight: 700; font-display: swap; src: url(../fonts/titillium-web-700-italic-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }