<web Font的使用>

使用font-face将字体引入web中

先将字体文件复制到项目的font文件夹中，CSS样式如下：

复制代码
            @font-face {
              font-family: 'iconfont';  /*字体名称*/
              src: url('font/fontello.eot?53711433');  /*字体文件路径*/
              src: url('font/fontello.eot?53711433#iefix') format('embedded-opentype'),
                   url('font/fontello.woff2?53711433') format('woff2'),
                   url('font/fontello.woff?53711433') format('woff'),
                   url('font/fontello.ttf?53711433') format('truetype'),
                   url('font/fontello.svg?53711433#fontello') format('svg');
              font-weight: normal;  /*加粗*/
              font-style: normal;  /*字形，如斜体*/
        }
复制代码

1.4.3、应用字体 

找到对应的字体编码：

这里可以将16进制的字符编码换算成10进制，也可以使用16进制的unicode编码不过需要x开头，代码如下：

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>font-face</title>
        <style type="text/css">
            @font-face {
              font-family: 'iconfont';  /*字体名称*/
              src: url('font/fontello.eot?53711433');  /*字体文件路径*/
              src: url('font/fontello.eot?53711433#iefix') format('embedded-opentype'),
                   url('font/fontello.woff2?53711433') format('woff2'),
                   url('font/fontello.woff?53711433') format('woff'),
                   url('font/fontello.ttf?53711433') format('truetype'),
                   url('font/fontello.svg?53711433#fontello') format('svg');
              font-weight: normal;  /*加粗*/
              font-style: normal;  /*字形，如斜体*/
        }
        .ok{
            font-family: iconfont;
            font-size: 16px;
            color: blue;
        }
        </style>
    </head>
    <body>
        <i class="ok">&#59405</i>赞
        <i class="ok">&#xe80d</i>赞
    </body>
</html>
复制代码

运行结果：

 

上面的示例有一些不足，因为每一次都需要去查询编码，很麻烦，可以使用伪元素将内容直接写在css中，一直写入反复使用。简单改进后的代码如下：

复制代码
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>font-face</title>
        <style type="text/css">
            @font-face {
                font-family: 'iconfont';
                /*字体名称*/
                src: url('font/fontello.eot?53711433');
                /*字体文件路径*/
                src: url('font/fontello.eot?53711433#iefix') format('embedded-opentype'), url('font/fontello.woff2?53711433') format('woff2'), url('font/fontello.woff?53711433') format('woff'), url('font/fontello.ttf?53711433') format('truetype'), url('font/fontello.svg?53711433#fontello') format('svg');
                font-weight: normal;
                /*加粗*/
                font-style: normal;
                /*字形，如斜体*/
            }
            
            .icon {
                font-family: iconfont;
                font-style: normal;
            }
            
            .ok:after {
                content: '\e80d';
            }
            
            .star:after {
                content: '\e804';
            }
        </style>
    </head>

    <body>
        <p>
            <i class="icon ok"></i>赞
            <i class="icon star"></i>5分
        </p>
        <p>
            <i class="icon star"></i><i class="icon star"></i><i class="icon star"></i>
        </p>
    </body>

</html>
复制代码

运行结果：

 IE8下依然正常：

图标网站的CSS其实已经够用了：

 View Code

1.4.4、字体格式转换

有时候我们手上只有一个字体文件，但是web font为了兼容经常需要多个种格式支持，一般至少2种，一种要考虑IE浏览器，一种要考虑现代浏览器。可以使用如下的工具实现在线字体的转换，基本方法是将字体上传，在线服务的网站将一个字体文件变换成多个字体文件后下载。

常用的字体转换在线工具如下：

https://www.fontsquirrel.com/tools/webfont-generator

https://everythingfonts.com/

http://www.freefontconverter.com/

http://www.font2web.com/

这里以webfont-generator为例，测试结果如下：

先下载字体，英文字体可以去"http://www.dafont.com/"下载，字体非常多，可以按需求搜索，这里下载了一款卡通3D字体。

将下载到的字体上传：

下载网站生成的内容解压，发现使用了google的jQuery，需要替换，显示结果如下：

将字体引入到web项目中，先复制字体文件，再添加css样式，应用样式即可，示例代码如下：

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>新字体</title>
        <style>
            @font-face {
                font-family: 'sketch3d';
                src: url('font2/sketch_3d-webfont.eot');
                src: 
                url('font2/sketch_3d-webfont.eot?#iefix') format('embedded-opentype'), 
                url('font2/sketch_3d-webfont.woff2') format('woff2'), 
                url('font2/sketch_3d-webfont.woff') format('woff');
                font-weight: normal;
                font-style: normal;
            }
            span{
                font:72px/100px  sketch3d;
                color: lightcoral;
            }
        </style>
    </head>
    <body>
        <span>
            Hello Sketch 3D
        </span>
    </body>
</html>
复制代码

运行结果：

常用在线工具：http://tool.lu/

字体下载：http://www.dafont.com/

1.4.5、查看字体编码

有时候我们手上有一个图标字体文件，但是不知道他的对应编码，在线工具可以检测到一些，但有时发现在线工具并不是能检测到所有的编码，使用工具：FontCreator，不仅可以创建自己的字体还可以查看字体的详细内容。

1.4.6、base64内嵌字体

有些小的字体文件可以直接编码成base64将字符放在css文件中，让css直接解析，这种办法可以减少一些客户端的请求，图片与字体文件都可以这样做，如下所示：

第一步先将字体文件转换成base64的编码，当然也可以将base64的编码反向转换成字体文件，可以使用在线工具：

http://www.motobit.com/util/base64-decoder-encoder.asp

第二将编码复制到css文件中，剩下的步骤与前面使用web font就是一样的了，示例如下：

运行结果：

https://www.web-font-generator.com/

二、CSS Sprite

CSS Sprites也就是通常说的CSS精灵，也有人称为雪碧图，是对网页中加载的图片的处理技术。在一个网页中可能有多张小的图片，如图标等，会向服务器发送多个请请求，请求数越多，服务器的压力就越大，精灵技术就是先将多张小的图片合并成一张图片，然后在CSS中分开为多张小图片的一种技术。如下图所示：

2.1、将小图片合并

可以使用在线合并，也可以使用photoshop合并，更加省事的办法是使用一些小工具，如“Css Sprite Tools”、“CSS Satyr ”,“iwangx”

 

2.2、使用CSS分离图片

为了分离图片，需要先了解background-position属性：

作用：设置或检索对象的背景图像位置，必须先指定 <' background-image '> 属性

background-position：<position> [ , <position> ]*
<position> = [ left | center | right | top | bottom | <percentage> | <length> ] | [ left | center | right | <percentage> | <length> ] [ top | center | bottom | <percentage> | <length> ] | [ center | [ left | right ] [ <percentage> | <length> ]? ] && [ center | [ top | bottom ] [ <percentage> | <length> ]? ]
默认值：0% 0%，效果等同于left top
适用于：所有元素
<percentage>： 用百分比指定背景图像填充的位置。可以为负值。其参考的尺寸为容器大小减去背景图片大小 
<length>： 用长度值指定背景图像填充的位置。可以为负值。 
center： 背景图像横向和纵向居中。 
left： 背景图像在横向上填充从左边开始。 
right： 背景图像在横向上填充从右边开始。 
top： 背景图像在纵向上填充从顶部开始。 
bottom： 背景图像在纵向上填充从底部开始。

示例代码：

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS Sprite</title>
        <style type="text/css">
            #icon{
                border: 1px solid blue;
                height: 500px;
                width: 1000px;
                background: url(img/x.png) no-repeat #fff;
                background-position: -150px -150px;
            }
        </style>
    </head>
    <body>
        <h2>CSS Sprite</h2>
        <div id="icon"></div>
    </body>
</html>
复制代码

没有偏移时的效果：

负向偏移时的效果：

 

 根据上面的办法可以定位到图片的任何位置开始选择背景，可以通过div的大小控制将选择的图片高宽，示例如下：

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS Sprite</title>
        <style type="text/css">
            #icon{
                height: 64px;
                width: 56px;
                background: url(img/allbgs.png) no-repeat #fff;
                background-position: -128px 0;
            }
        </style>
    </head>
    <body>
        <h2>CSS Sprite</h2>
        <div id="icon"></div>
    </body>
</html>
复制代码

运行结果：

因为第一张图片与第二张小图片的宽度都是64px，所以让大图向左边先移动128像素，Y轴不需要动，其实生成合并图片的工具已经把CSS准备好了，脚本如下：

复制代码
.ban{background:url(../imgs/allbgs.png) no-repeat -1px 0px;width:64px;padding-top:66px;}
.basket{background:url(../imgs/allbgs.png) no-repeat -64px 0px;width:64px;padding-top:66px;}
.bell{background:url(../imgs/allbgs.png) no-repeat -128px 0px;width:56px;padding-top:66px;}
.anchor{background:url(../imgs/allbgs.png) no-repeat -184px 0px;width:52px;padding-top:66px;}
.archive{background:url(../imgs/allbgs.png) no-repeat -236px 0px;width:64px;padding-top:66px;}
.archive2{background:url(../imgs/allbgs.png) no-repeat -301px 0px;width:64px;padding-top:66px;}
复制代码

不过，上面的CSS是可以优化的，可以将每个图标拆分成两个类样式。

2.3、小结

CSS Sprites非常值得学习和应用，特别是页面有很多很小的icon（图标），但如果需要选择使用CSS精灵技术，你需要了解它的优缺点。

优点：

a)、利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；

b)、CSS Sprites能减少图片的字节，曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。

c）、解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。

d)、更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便。

缺点：
1.在图片合并的时候，你要把多张图片有序的合理的合并成一张图片，还要留好足够的空间，防止板块内出现不必要的背景；这些还好，最痛苦的是在宽屏，高分辨率的屏幕下的自适应页面，你的图片如果不够宽，很容易出现背景断裂；

2.CSS Sprites在开发的时候比较麻烦，你要通过photoshop或其他工具测量计算每一个背景单元的精确位置。

3.CSS Sprites在维护的时候比较麻烦，如果页面背景有少许改动，一般就要改这张合并的图片，无需改的地方最好不要动，这样避免改动更多的CSS，如果在原来的地方放不下，又只能（最好）往下加图片，这样图片的字节就增加了，还要改动CSS。

三、示例下载

 https://github.com/zhangguo5/CSS3_5

提示：使用字体文件时请尊重创作者的版权，商业应用应该更加慎重，不过还是有不少的开源字体库的。

 

 

 

 

使用font-face将字体引入web中

先将字体文件复制到项目的font文件夹中，CSS样式如下：

复制代码
            @font-face {
              font-family: 'iconfont';  /*字体名称*/
              src: url('font/fontello.eot?53711433');  /*字体文件路径*/
              src: url('font/fontello.eot?53711433#iefix') format('embedded-opentype'),
                   url('font/fontello.woff2?53711433') format('woff2'),
                   url('font/fontello.woff?53711433') format('woff'),
                   url('font/fontello.ttf?53711433') format('truetype'),
                   url('font/fontello.svg?53711433#fontello') format('svg');
              font-weight: normal;  /*加粗*/
              font-style: normal;  /*字形，如斜体*/
        }
复制代码

1.4.3、应用字体 

找到对应的字体编码：

这里可以将16进制的字符编码换算成10进制，也可以使用16进制的unicode编码不过需要x开头，代码如下：

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>font-face</title>
        <style type="text/css">
            @font-face {
              font-family: 'iconfont';  /*字体名称*/
              src: url('font/fontello.eot?53711433');  /*字体文件路径*/
              src: url('font/fontello.eot?53711433#iefix') format('embedded-opentype'),
                   url('font/fontello.woff2?53711433') format('woff2'),
                   url('font/fontello.woff?53711433') format('woff'),
                   url('font/fontello.ttf?53711433') format('truetype'),
                   url('font/fontello.svg?53711433#fontello') format('svg');
              font-weight: normal;  /*加粗*/
              font-style: normal;  /*字形，如斜体*/
        }
        .ok{
            font-family: iconfont;
            font-size: 16px;
            color: blue;
        }
        </style>
    </head>
    <body>
        <i class="ok">&#59405</i>赞
        <i class="ok">&#xe80d</i>赞
    </body>
</html>
复制代码

运行结果：

 

上面的示例有一些不足，因为每一次都需要去查询编码，很麻烦，可以使用伪元素将内容直接写在css中，一直写入反复使用。简单改进后的代码如下：

复制代码
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>font-face</title>
        <style type="text/css">
            @font-face {
                font-family: 'iconfont';
                /*字体名称*/
                src: url('font/fontello.eot?53711433');
                /*字体文件路径*/
                src: url('font/fontello.eot?53711433#iefix') format('embedded-opentype'), url('font/fontello.woff2?53711433') format('woff2'), url('font/fontello.woff?53711433') format('woff'), url('font/fontello.ttf?53711433') format('truetype'), url('font/fontello.svg?53711433#fontello') format('svg');
                font-weight: normal;
                /*加粗*/
                font-style: normal;
                /*字形，如斜体*/
            }
            
            .icon {
                font-family: iconfont;
                font-style: normal;
            }
            
            .ok:after {
                content: '\e80d';
            }
            
            .star:after {
                content: '\e804';
            }
        </style>
    </head>

    <body>
        <p>
            <i class="icon ok"></i>赞
            <i class="icon star"></i>5分
        </p>
        <p>
            <i class="icon star"></i><i class="icon star"></i><i class="icon star"></i>
        </p>
    </body>

</html>
复制代码

运行结果：

 IE8下依然正常：

图标网站的CSS其实已经够用了：

 View Code

1.4.4、字体格式转换

有时候我们手上只有一个字体文件，但是web font为了兼容经常需要多个种格式支持，一般至少2种，一种要考虑IE浏览器，一种要考虑现代浏览器。可以使用如下的工具实现在线字体的转换，基本方法是将字体上传，在线服务的网站将一个字体文件变换成多个字体文件后下载。

常用的字体转换在线工具如下：

https://www.fontsquirrel.com/tools/webfont-generator

https://everythingfonts.com/

http://www.freefontconverter.com/

http://www.font2web.com/

这里以webfont-generator为例，测试结果如下：

先下载字体，英文字体可以去"http://www.dafont.com/"下载，字体非常多，可以按需求搜索，这里下载了一款卡通3D字体。

将下载到的字体上传：

posted @ 2016-12-05 19:12  --obj  阅读(671)  评论(0)  编辑  收藏  举报