网络字体@font-face 如何处理网页中的特殊字体

HTML5学堂：随着网页的发展，网页中出现了越来越多的字体种类，网页自带的微软雅黑、宋体、黑体已经越来越难以满足设计的需要，那么，如何在网站中使用比较特殊的字体，又不会下载太大的字体文件，来装饰我们网站的部分呢？一起来看看我们CSS3的新功能吧！

如何在网站中使用比较特殊的字体

随着网页的发展，网页中出现了越来越多的字体种类，原有的微软雅黑以及宋体早就无法满足设计的需要，那么，如何在网站中使用比较特殊的字体（如“华文行楷”）来装饰我们网站的部分呢？作为前端开发的人员都知道，在自己电脑上安装字体查看网页没有什么作用，因为网页会上传到服务器，访问网站的用户电脑上不一定会有这种字体，除非在客户端安装这个字体，才能保证每个用户网页中能够正常显示。如果客户端没有安装，那么页面渲染会调用客户端电脑上已有的字体来替代我们定义的字体。

在以前的页面制作当中，一旦出现这些特殊字体，我们通常会使用图片来代替，不过这样的做法只适合于使用比较少的特殊字体的网站。而且用图片代替文字的做法，并不方便修改，也不利于SEO搜索引擎优化（譬如LOGO使用了h1标签，却由于字体很特殊而使用了图片，那么h1的作用基本等同于没有发挥出来）。

在CSS2.0 规范中有一个东西，@font-face（IE4.0就存在），后来在 CSS2.1 草案中又被删掉。后来又被纳入到CSS3草案当中。这个东西就是今天要跟大家分享的东西——自定义网络字体。

网络字体的支持程度（截止到2015年04月29日）

我们可以使用该属性进行自定义字体的设置，换句话说，使用它之后，我们就能够在网络中自由的使用自定义字体，先来看其基本的语法：

@font-face {
font-family: <YourWebFontName>;
src: <source> [<format>][,<source> [<format>]]*;
[font-weight: <weight>];
[font-style: <style>];
}

其中font-weight和font-style都可以进行设置，也可以使用默认值。

第一步设置的是font-family的名字，在这里设置好之后。网页中哪个部分需要使用这种字体，就输入font-family（对应的名字）即可。

每个字体都有src的属性，包含source以及format定义，source是字体的本地名。（例如：华文行楷的字体名为“STXINGKA”），为所有的字体进行这样的设置的作用是：当用户本地已经下载了同样字体的时候，可以节约网上下载的成本。format是用于提示该资源 URL 所引用的字体格式，如果浏览器在本地没有找到这种字体，那么会将url中设置的字体加载到页面当中。设置自定义网络字体，必须设置src以及font-family。

关于字体格式以及浏览器对字体的支持程度表：

实际代码示例：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>H5course</title>
<style>
@font-face {
    font-family: 'STXINGKA';
    src: local('STXINGKA'), url('STXINGKA.ttf') format('truetype');
}
.con {
    font-family: 'STXINGKA';
    font-size: 44px;        
}
</style>
</head>
<body>
<div class="con">独行冰海</div>
</body>
</html>

欢迎沟通交流~HTML5学堂

如何制作特殊字体

讲到这里，可能有的人会说，的确可以引入，但是一个字体包实在是太大了，如果直接让用户下载一个字体包，一费流量，二加载速度慢，没准等到字体加载完成的时候，用户已经关闭页面了。这个考虑的确是有必要的。

国外的字库只用几十kb 的大小(英文字母 26大写+26小写再加些标点符号)，而我们的中文字库动不动就几M甚至几十M不等，为了美化我们的网站而在字体上面增加几M的流量是很不明智的选择。

接下来就为大家介绍解决的方法：我们完全可以把网页中出现的特殊字体提取出来，把没有必要的去除掉，制作一个精简版的字库供网页使用。

此时会使用到font creator 软件。基本的操作步骤为：

1）打开 font creator ，导入想精简的字库文件（字体在控制面板中可以找到，复制一份到桌面即可）

2）获取文字的unicode码。

可以通过js的 escape() 方法实现：var uni = escape("独"); console.log(uni); %u 后面的 4位数字即为 unicode码。

3）按 ctrl + F 调出查找功能,根据字符的 unicode 码进行查找，找到相应的汉字。查找时需要添加$符号

4）新建一个字体库，并把多余的字删掉，之后在空白处点击右键选择添加，生成一个空白的字体存放单元，ctrl+c完整字库中需要添加的汉字，选择新字库中新建的空白字体存放单元，ctrl + v粘贴，覆盖即可

5）选择映射选项卡，在映射区块右侧输入字体的 unicode 码，点击添加到此，我们的字体库就制作完成啦~~~