问题
Suppose I have a website in which I have customized fonts, and all the .otf files are about 1MB.
Now, when a user visits the website, the fonts will be downloaded. The question is, will these fonts remain in the user's browser as installed all the time? I.e. Even if the user turns off the browser, will the fonts remain in there? Or are .otf files just like all the .css .html files? Which can be cached but then need to be downloaded again?
If the latter, how do we deal with this problem? I mean making the user download 1MB of fonts is not good for UX. How other websites deal with this problem? Is some kind of local storage used?
回答1:
Although this may be a little browser dependent but the fonts are downloaded each time and are not cached in the browser. This is evident by the FOUT (Flash of Unstyled Text). You may look into this for more details and a solution: https://stackoverflow.com/a/8844467/2407962
回答2:
Suppose I have a website in which I have customized fonts, and all the .otf files are about 1MB.
I have been using google fonts on one of my web site, which are only 2.6KB in general.
Now, when a user visits the website, the fonts will be downloaded. The question is, will these fonts remain in the user's browser as installed all the time? I.e. Even if the user turns off the browser, will the fonts remain in there? Or are .otf files just like all the .css .html files? Which can be cached but then need to be downloaded again?
I see, My website always fetches the fonts when a user access the site. Even if the user do not clear their browser cache, website would still fetch the fonts like css and html, on accessing the site.
If the latter, how do we deal with this problem? I mean making the user download 1MB of fonts is not good for UX. How other websites deal with this problem? Is some kind of local storage used?
gzip encoding may help you.
This has been my experience and i couldn't find other approaches when i checked. May be someone else could suggest a better approach.
回答3:
All external includes in a page can be cached: e.g.
- Images (GIF, JPG, PNG)
- CSS stylesheets
- JavaScript/JSON files
- Audio
- Video
- Etc.
The key is setting the right HTTP Response headers to enable them to be cached for as long as you'd like them to be.
//PHP style, other server lang syntaxes will vary
header("Cache-Control: max-age=31536000"); //365 days
You can't guarantee that the end user will keep them in the cache, but the Cache-Control headers tell the browser how long they can keep them for.
Unfortunately some users have their browser configured to flush the cache on closing, or only maintain a very small cache. You can track your web server logs/stats to see if your users are caching things well.
来源：https://stackoverflow.com/questions/27884947/do-browsers-need-to-re-download-customized-fonts-every-time-they-access-a-websit