问题
On a website I manage we have several .woff files, one for each font. In the interest to save loading time I want to reduce the number of requests made. Is it possible to combine these woff files into one resource?
回答1:
You can bundle the woff assets into your CSS with base64.
Inside your @font-face declaration:
url('data:application/x-font-woff;base64,myVeryLongBase64StringGoesHere...');
This may increase the asset's file size. In my experience this is usually by around 20% - roughly the same size as the equivalent TTF file. Much of this may be recovered with a gzip-capable server. The tradeoff is acceptable for me, but YMMV.
As is often recommended when embedding blobs in CSS - keep them all in a separate stylesheet, cited after your base style. Otherwise, the client may be waiting for the fonts to load before they see your content as intended.
回答2:
I don't have the reputation to comment, but to update @thumphries answer, you can now use the following for WOFF and WOFF2:
url('data:application/font-woff;base64,myVeryLongBase64StringGoesHere...');
url('data:font/woff2;base64,myVeryLongBase64StringGoesHere...');
And for reference, on UNIX, you can use the built-in base64 command to directly generate your base64 string like so:
$ base64 myfont.ttf > fontbase64.txt
I find this preferable, since latency is the biggest issue for mobile users, and I add a url fallback for browsers that don't speak WOFF2 (less than 8% of my users) to avoid increasing total size of the site. Like so:
url('data:font/woff2;base64,myVeryLongBase64StringGoesHere...'),
url('/fonts/myFont.woff') format('woff');
来源：https://stackoverflow.com/questions/13134863/combine-multiple-woff-files-into-one