In uno script precedente abbiamo visto come sia possibile utilizzare un font personalizzato la direttiva @font-face di CSS3: https://www.html5italia.com/script/42/Font-Layout-Personalizzati-CSS3.aspx
Una tecnica molto diffusa per disegnare le icone, prevede di utilizzare un iconic font per le immagini, beneficiando della possibilità di adattare le stesse in maniera vettoriale, proprio come avverrebbe per un font "normale".
La presenza di diversi dispositivi con pixel-density differenti (es. display Retina) può infatti rendere necessario adottare alcuni accorgimenti per la gestione delle dimensioni di un immagine, come dimostrato nello script: https://www.html5italia.com/script/56/Adattare-Immagini-Base-Pixel-Density-HTML5-CSS3.aspx
Adottare un iconic font per la gestione delle immagini porta i seguenti benefici:
- portabilità e "peso" ridotto
- controllo dell'aspetto mediante css (icona, colore, dimensioni, ombreggiatura...)
- mantenimento dell'aspetto e dei dettagli a qualsiasi dimensione (scalable vector graphics)
- supporto dei display ad alta risoluzione
Esistono molteplici iconic font gratuiti e a pagamento che consentono diverse possibilità di estensione, nell'esempio abbiamo utilizzato Font Awesome disponibile qui: http://fortawesome.github.com/Font-Awesome/
Con gli iconic font si possono ottenere layout molto gradevoli e, soprattutto, portabili sui diversi tipi di display:
Di seguito lo script dell'esempio:
<!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>Using iconic font</title> <link rel="stylesheet" href="https://raw.github.com/FortAwesome/Font-Awesome/master/css/font-awesome.min.css" type="text/css"/> </head> <body> <div class="headItem"> <span class="space1">Code</span> <span class="space2">Description</span> <span class="space1">Price</span></div> <div class="item"> <span class="space1">code1</span> <span class="space2">article one</span> <span class="space1">100.00 ¤</span> <a href="#" class="button addtocart"><i class="icon-shopping-cart icon-large" title="add"></i> add to cart</a> </div> <div class="item"> <span class="space1">code2</span> <span class="space2">article two</span> <span class="space1">120.00 ¤</span> <a href="#" class="button addtocart"><i class="icon-shopping-cart icon-large" title="add"></i> add to cart</a> </div> <div class="item"> <span class="space1">code3</span> <span class="space2">article three</span> <span class="space1">115.00 ¤</span> <a href="#" class="button addtocart"><i class="icon-shopping-cart icon-large" title="add"></i> add to cart</a> </div> <div class="footerItem"> <span class="space1"></span> <span class="space2"></span> <span class="space1"></span> <a href="#" class="button checkout"><i class="icon-arrow-right icon-large" title="add"></i> Checkout</a> </div> </body> </html>
body{ font-family: helvetica; } a:link{ text-decoration:none; } .button{ border-radius: 3px; padding-left: 10px; padding-right: 10px; padding-top: 5px; padding-bottom: 5px; } .checkout{ color:black; background-color: gold; } .addtocart{ color: white; background-color: dodgerblue; } .space1{ display:inline-block; width:100px; } .space2{ display:inline-block; width:200px; } .headItem{ border-bottom:2px solid gray; padding:7px; } .item{ border-bottom:2px dotted gray; padding:7px; } .footerItem{ margin-top:30px; padding:7px; }
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Hosting di componenti WebAssembly in un'applicazione Blazor static
Miglioramenti agli screen reader e al contrasto in Angular
Evitare il flickering dei componenti nel prerender di Blazor 8
Specificare il versioning nel path degli URL in ASP.NET Web API
Registrare servizi multipli tramite chiavi in ASP.NET Core 8
Implementare l'infinite scroll con QuickGrid in Blazor Server
Creazione di componenti personalizzati in React.js con Tailwind CSS
Eseguire le GitHub Actions offline
Eseguire operazioni sui blob con Azure Storage Actions
Definire stili a livello di libreria in Angular
Utilizzare politiche di resiliency con Azure Container App
Configurare policy CORS in Azure Container Apps
I più letti di oggi
- C# 4
- Spaziatura tra i caratteri in Silverlight 5
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- Segui in tempo reale il TechEd 2004
- da oggi è possibile fare login velocemente con LinkedIn e Google. a questi si aggiunge il supporto già attivo per Facebook, Twitter, Microsoft Account, Windows Hello e OpenID, per darvi sempre più possibilità di accedere semplicemente alla nostra community! #aspitalia
- Migrare una service connection a workload identity federation in Azure DevOps
- Evitare postback multipli in un UpdatePanel