如何使你的网页图片在高分辨率屏幕下不会变模糊

一、前言

在传统的网页制作过程中，涉及图标的情况大多用图片进行处理，图片有优势也有不足。例如，使用图片会增加总文件的大小和很多额外的“http 请求”，增大服务器的负担，并且大量图片下载需要时，增加用户的等待时间，牺牲用户体验。另外，图片通常都是矢量图，在移，动端高分辨率屏上会变得模糊，因此，有时候在“响应 式设计”中需要使用图标的最佳解决方案就是不去使用图片，而字体通常是矢量的，所以就解决了图片的缺点，即图标字体化。自定义图标字体是比较麻烦的，而font-awesome为用户准备了将近500个常用icon图标(并且还在不断更新)，能大能小，能随便修改颜色，完全开源，且完全免费。

二、下载

font-awesome其实就是一个图标工具，当前最新版本是4.7.0
首先，我们可以去https://fontawesome.dashgame.com/这个网站进行下载，同样，也可以在GitHub上进行下载，下载地址是https://github.com/FortAwesome/Font-Awesome。font-awesome是完全开源，且完全免费。在解压后，打开文件夹可以看到如图所示的文件夹。

在上面和这个图中，我们只需要关注css 和fonts 这两个文件夹。fonts文件夹中有我们需要的字体文件，css文件夹里面是该工具提供的css文件。我们在使用时需要将这两个文件夹粘贴复制到我们建立的项目中。如图所示