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

一、前言

在传统的网页制作过程中，涉及图标的情况大多用图片进行处理，图片有优势也有不足。例如，使用图片会增加总文件的大小和很多额外的“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文件。我们在使用时需要将这两个文件夹粘贴复制到我们建立的项目中。如图所示

三、font-awesome初步应用

接下来我们通过下面一段简单的代码展示如何使用font-awesome。

【代码分析】
使用链接式嵌入font-awesome.min.css的css样式表，通过来调用图标。用游览器打开上段代码我们可以看到如图所示。

font-awesome为用户准备了将近500个常用icon图标(并且还在不断更新)，能大能小，能随便修改颜色。具体的图标以及调用方式我们可以在官网上查看。如下图所示。图标对应着名称。

四、font-awesome小案例

    
    
    
    
    




    
One Web , Any Device
    
万物互连，极致体验
    

        
【HTML5】全面兼容移动设备
        
颠覆原生应用指日可待，传智播客重新定义前端开发
        

            

                
                
微信公众平台开发
            
            

                
                
原生移动APP开发
            
            

                
                
网站开发
            
            

                
                
桌面应用开发
            
        
    

使用游览器打开上述代码我们可以看到如下界面。