当前位置： 移动技术网 > IT编程>网页制作>技巧 > 如何使你的网页图片在高分辨率屏幕下不会变模糊

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

2020年07月24日  | 移动技术网IT编程  | 我要评论

一、前言

在传统的网页制作过程中，涉及图标的情况大多用图片进行处理，图片有优势也有不足。例如，使用图片会增加总文件的大小和很多额外的“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。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>font-awesome</title>
    <link rel="stylesheet" href="css/font-awesome.min.css">
</head>
<body>
<i class="fa fa-weixin " style="font-size: 5em "></i>
</body>
</html>

【代码分析】
使用链接式嵌入font-awesome.min.css的css样式表，通过<i class="fa fa-weixin " style="font-size: 5em "></i>来调用图标。用游览器打开上段代码我们可以看到如图所示。
在这里插入图片描述
font-awesome为用户准备了将近500个常用icon图标(并且还在不断更新)，能大能小，能随便修改颜色。具体的图标以及调用方式我们可以在官网上查看。如下图所示。图标对应着名称。
在这里插入图片描述

四、font-awesome小案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>web字体图标的应用</title>
    <!--嵌入awesome字体css文件-->
    <link rel="stylesheet" href="css/font-awesome.min.css" type="text/css">
    <style>
        body{
            background-color: #878787;
        }
        .section{
            background-color: #3e3e3e;
            height: 500px;
            width: 800px;
            margin:0 auto;
        }
        h2,h3,h4{
            color: white;
            text-align: center;
            margin: 30px;
        }
        .section-top{
            padding-top: 20px;
        }
        .awesome{
            width: 100%;
            height: 100%;
            padding-top: 20px;
        }
        .weixin,.apple,.desktop,.laptop{
            width: 200px;
            height: 150px;
            float: left;
        }
        .fa{
            margin-left: 55px;
        }
        .fa-apple{
            margin-left: 65px ;
        }
        .section-center p{
            color: white;
            text-align: center;
        }
        @font-face {
            font-family: my font;
            src: url('fonts/书法家行书体.TTF');
            font-weight: normal;
            font-style: normal;
        }
        h2{
            font-size: 4rem;
            font-family: "华文行楷";
        }
        h3{
            font-family: "Microsoft YaHei UI";
            font-size: 2rem;
        }
    </style>
</head>
<body>
<div class="section">
<div class="section-top">
    <h2>One Web , Any Device</h2>
    <h3>万物互连，极致体验</h3>
    <div class="section-center">
        <h4>【HTML5】全面兼容移动设备</h4>
        <h4>颠覆原生应用指日可待，传智播客重新定义前端开发</h4>
        <div class="awesome">
            <div class="weixin">
                <i class="fa fa-weixin " style="font-size: 5em ;color:white"></i>
                <p>微信公众平台开发</p>
            </div>
            <div class="apple">
                <i class="fa fa-apple " style="font-size: 5em ;color:white"></i>
                <p>原生移动APP开发</p>
            </div>
            <div class="desktop">
                <i class="fa fa-desktop " style="font-size: 5em ;color:white"></i>
                <p>网站开发</p>
            </div>
            <div class="laptop">
                <i class="fa fa-laptop " style="font-size: 5em ;color:white"></i>
                <p>桌面应用开发</p>
            </div>
        </div>
    </div>
</div>
</div>
</body>

使用游览器打开上述代码我们可以看到如下界面。
在这里插入图片描述

本文地址：https://blog.csdn.net/weixin_44989801/article/details/107512473

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网