Parlando di web fonts e performance CSS è emerso come sia da valutare attentamente la scelta fra uso della proprietà @font-face e testo reso come immagine.
Chi utilizza Google Web Fonts, API per utilizzare una ricca collezione di font online, può da qualche tempo limitare il caricamento ed il rendering del font scelto selezionando solo i caratteri indispensabili.
Poniamo il caso di dover usare un particolare font solo per il titolo del nostro sito (Lorem Ipsum srl): ci basterà indicare nella query string un attributo "text" e far scaricare solo le lettere (10 in tutto) necessarie. Il codice apparirà simile a questo:
<link href="http://fonts.googleapis.com/css?family=Droid+Serif&text=LoremIpsumsrl" rel="stylesheet" type="text/css">
In questo modo le differenze di peso/velocità fra i metodi (CSS3 vs immagini) si assottigliano, rendendo la scelta finale una questione personale. Entrambe le soluzioni possono garantire a modo loro semantica, accessibilità e leggerezza. Le immagini ci costringeranno magari ad un lavoro supplementare di codice (image replacement) ma garantiscono attributi in più utili a fini SEO ed uniformità totale di visualizzazione, @font-face ci permetterà di seguire lo standard.
/https://www.html.it/app/uploads/2024/06/css-2.png)
/https://www.html.it/app/uploads/2024/06/google-chrome-_-.jpg)
/https://www.html.it/app/uploads/2024/04/css.png)
/https://www.html.it/app/uploads/2024/01/cssday.png)