Con CSS 3 è possibile dare un ulteriore tocco di personalità ad una pagina web, impostando un font personalizzato, che ricalchi l'identità del sito web, evitando di utilizzare immagini o plug-in per gestire la visualizzazione di un nuovo carattere.
Originariamente, con le specifiche CSS2, era possibile utilizzare un set di font limitato all'insieme dei font presenti sul client su cui viene eseguito il browser. Pur avendo a disposizione diversi workaround, più o meno supportati dai diversi browser, con CSS3 (ed un browser moderno) è ora possibile aggirare questa limitazione, utilizzando un nuovo formato di riferimento per i font ovvero Web Open Font Format.
Possiamo pensare a questo formato come un file compresso, contenente il font in diversi formati quali True Type e Open Font Format.
Per utilizzare il font personalizzato è necessario dichiarare una nuova famiglia di font attraverso la direttiva @font-face e specificando il file ed il formato sorgente:
@font-face { font-family: 'Ranchers'; font-style: normal; font-weight: 400; src: local('Ranchers'), local('Ranchers-Regular'), url(http://themes.googleusercontent.com/static/fonts/ranchers/v1/E34kymtaVEvz9DHCAGmTDnYhjbSpvc47ee6xR_80Hnw.woff) format('woff'); } h1{ font-family: 'Ranchers'; }
<!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>Custom fonts</title> </head> <body> <h1>Gestione tipografica</h1> </body> </html>
La specifica completa è disponibile su: http://www.w3.org/TR/2012/WD-css3-fonts-20120823/
Un altra novità di CSS3 è il supporto alle funzionalità di gestione del layout del testo, che consente di disporre il contenuto in più colonne, senza l'impiego di tabelle o tecniche alternative.
Con gli attributi utilizzati nell'esempio è possibile specificare il numero di colonne, lo spazio tra le stesse ed eventualmente un bordo di contenimento.
#content{ -moz-column-count:5; -moz-column-gap:5pt; -moz-column-rule:1px solid #aaa; -webkit-column-count:5; -webkit-column-gap:5pt; -webkit-column-rule:1px solid #aaa; column-count:5; column-gap:5pt; column-rule:1px solid #aaa; } h1{ font-family: 'Ranchers'; }
<!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>Custom fonts</title> </head> <body> <h1>Gestione tipografica</h1> <div id="content">Lorem ipsum...</div> </body> </html>
La specifica completa è disponibile su: http://www.w3.org/TR/css3-multicol/
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Utilizzare il trigger SQL con le Azure Function
Effettuare lo stream della risposta in ASP.NET Core tramite IAsyncEnumerable
Reactive form tipizzati con modellazione del FormBuilder in Angular
Utilizzare Model as a Service su Microsoft Azure
Utilizzare l'operatore GroupBy come ultima istruzione di una query LINQ in Entity Framework
Generare file per il download da Blazor WebAssembly
Specificare il versioning nel path degli URL in ASP.NET Web API
Eseguire le GitHub Actions offline
Configurare policy CORS in Azure Container Apps
Creare form tipizzati con Angular
Limitare le richieste lato server con l'interactive routing di Blazor 8
Reactive form tipizzati con FormBuilder in Angular
I più letti di oggi
- PWAConf 2020 - Online
- Reactive form tipizzati con FormBuilder in Angular
- Utilizzare ChatGPT con Azure OpenAI
- Mantenere sempre reattiva una Lambda di AWS
- Messaggi in tempo reale con Blazor Server
- Una chat con #aspnetcore e #websockets https://aspit.co/bmh di @GentiliMoreno #webapi #aspnetcore2
- Autenticarsi in modo sicuro su Azure tramite GitHub Actions
- Effettuare il multi-checkout in linea nelle pipeline di Azure DevOps
- Creare una MarkupExtension per accedere alle proprietà statiche in Silverlight 5.0
- Navigare la struttura visuale di un UIElement fino a recuperare l'elemento logico in Silverlight 3.0