2012-10-30 23 views
6

In un sito Web che gestisco abbiamo diversi file .woff, uno per ogni carattere. Nell'interesse di risparmiare tempo di caricamento, voglio ridurre il numero di richieste fatte. È possibile combinare questi file woff in un'unica risorsa?Combina più file .woff in uno

risposta

9

È possibile raggruppare le risorse del woff nel CSS con base64.

All'interno della vostra dichiarazione @ font-face:

url('data:application/x-font-woff;base64,myVeryLongBase64StringGoesHere...'); 

Questo può aumentare le dimensioni del file della risorsa. Secondo la mia esperienza, di solito si aggira intorno al 20%, all'incirca le stesse dimensioni del file TTF equivalente. Gran parte di ciò potrebbe essere ripristinato con un server abilitato a gzip. Il compromesso è accettabile per me, ma YMMV.

Come spesso si consiglia quando si incorporano BLOB in CSS, tenerli tutti in un foglio di stile separato, citato dopo lo stile di base. In caso contrario, il client potrebbe essere in attesa del caricamento dei caratteri prima di vedere i tuoi contenuti come previsto.