使用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其实已经够用了：

 

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其实已经够用了：

 

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字体。

将下载到的字体上传：

<web Font的使用>的更多相关文章

  1. 简单物联网：外网访问内网路由器下树莓派Flask服务器

    最近做一个小东西,大概过程就是想在教室,宿舍控制实验室的一些设备. 已经在树莓上搭了一个轻量的flask服务器,在实验室的路由器下,任何设备都是可以访问的:但是有一些限制条件,比如我想在宿舍控制我种花 ...

  2. 利用ssh反向代理以及autossh实现从外网连接内网服务器

    前言 最近遇到这样一个问题,我在实验室架设了一台服务器,给师弟或者小伙伴练习Linux用,然后平时在实验室这边直接连接是没有问题的,都是内网嘛.但是回到宿舍问题出来了,使用校园网的童鞋还是能连接上,使 ...

  3. 外网访问内网Docker容器

    外网访问内网Docker容器 本地安装了Docker容器,只能在局域网内访问,怎样从外网也能访问本地Docker容器? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Docker容器 ...

  4. 外网访问内网SpringBoot

    外网访问内网SpringBoot 本地安装了SpringBoot,只能在局域网内访问,怎样从外网也能访问本地SpringBoot? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装Java 1 ...

  5. 外网访问内网Elasticsearch WEB

    外网访问内网Elasticsearch WEB 本地安装了Elasticsearch,只能在局域网内访问其WEB,怎样从外网也能访问本地Elasticsearch? 本文将介绍具体的实现步骤. 1. ...

  6. 怎样从外网访问内网Rails

    外网访问内网Rails 本地安装了Rails,只能在局域网内访问,怎样从外网也能访问本地Rails? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Rails 默认安装的Rails端口 ...

  7. 怎样从外网访问内网Memcached数据库

    外网访问内网Memcached数据库 本地安装了Memcached数据库,只能在局域网内访问,怎样从外网也能访问本地Memcached数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装 ...

  8. 怎样从外网访问内网CouchDB数据库

    外网访问内网CouchDB数据库 本地安装了CouchDB数据库,只能在局域网内访问,怎样从外网也能访问本地CouchDB数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Cou ...

  9. 怎样从外网访问内网DB2数据库

    外网访问内网DB2数据库 本地安装了DB2数据库,只能在局域网内访问,怎样从外网也能访问本地DB2数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动DB2数据库 默认安装的DB2 ...

  10. 怎样从外网访问内网OpenLDAP数据库

    外网访问内网OpenLDAP数据库 本地安装了OpenLDAP数据库,只能在局域网内访问,怎样从外网也能访问本地OpenLDAP数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动 ...

随机推荐

  1. 基于SSM的租赁管理系统1.0_20161225_框架搭建

    搭建SSM底层框架 1. 利用mybatis反向工程generatorSqlmapCustom完成对数据库十表的映射 generatorConfig.xml <?xml version=&quo ...

  2. winform中选择文件获取路径

    private void button1_Click(object sender, EventArgs e) { //此时弹出一个可以选择文件的窗体 OpenFileDialog fileDialog ...

  3. DB2错误码信息

    00 完全成功完成 表 3  01 警告 表 4  02 无数据 表 5  07 动态 SQL 错误 表 6  08 连接异常 表 7  09 触发操作异常 表 8  0A 功能部件不受支持 表 9  ...

  4. iOS-上架APP之启动页设置（新手必看！）

    今天自己做的小作品准备提交,就差一个启动页,各种百度,各种搜,结果还好最后终于出来了,和大家分享一下,这个过程中遇到的各种小问题.(注XCode版本为7.2) 1.启动页一般都是图片,因为苹果有4,4 ...

  5. Android基础学习第二篇—Activity

    写在前面的话: 1. 最近在自学Android,也是边看书边写一些Demo,由于知识点越来越多,脑子越来越记不清楚,所以打算写成读书笔记,供以后查看,也算是把自己学到所理解的东西写出来,献丑,如有不对 ...

  6. Javascript、Jquery获取浏览器和屏幕各种高度宽度

    Javascript: IE中:document.body.clientWidth ==> BODY对象宽度document.body.clientHeight ==> BODY对象高度d ...

  7. 网站跨站点脚本，Sql注入等攻击的处理

    从360安全论坛里找到的一段代码,经过整理封装,直接在站点Global.asax文件或写一个HttpModule来拦截恶意请求即可: http://bbs.webscan.360.cn/forum.p ...

  8. windows server 2008禁止ping

    在cmd命令行中通过ping一个主机名.域名或ip地址可以获取到该机器的ip.操作系统等很多信息,处于安全考虑,很多时候不希望服务器被ping,在windows server 2008 r2可以这样操 ...

  9. RumTime实践之－－UITableView和UICollectionView缺省页的实现

    有关RunTime的知识点已经看过很久了,但是一直苦于在项目中没有好的机会进行实际运用,俗话说"光说不练假把式",正好最近在项目中碰到一个UITableView和UICollect ...

  10. PTAM 编译安装 on MAC（mavericks）

    最近有需要研究PTAM,所以需要在我的MAC上编译安装,整个过程让人非常崩溃各种问题陷阱.现在整理一下编译过程.我已经成功在MAC上编译.那么接下来我会详细讲解整个过程: 注意: 部分链接可能需要FQ ...