个性化html web中文字体的几个解决方案

2016-10-10 本文已影响3442人凉风有兴

因为中文字符众多，导致字体文件庞大，最小的中文字体文件也需要几个M以上的容量，字库完整的动辄十几个M甚至几十个M，将这么大的文件挂到页面上显然不现实，下面将介绍几种方法来解决。

1.jpg

首先必须说明的是，既然是用到了字体就必须了解：你所需的文字越多，字体文件的体积就越大。如果字体文件已经超过1M，几乎就可以放弃了。

所以也就是说，制作的web个性化字体只能用在广告上、标语上。--那为什么不直接用成图片呢？字体文件相对比于图片，有以下几个优势。

适用性： 一个图标字体比一系列的图像（特别是在Retina屏中使用双倍大小的图像）要小。一旦图标字体加载了，你的图标就会马上渲染出来，不需要下载一个图像。
可扩展性： 图标字体可以用过font-size属性设置其任何大小。这使您能够随时输出不同大小的图标，然而，使用位图，你必须得为每个不同大小的图像输出一个不同文件。
灵活性： 文字效果可以很容易地应用到你的图标上，包括颜色，阴影和翻转等效果。他们还可以在任何背景下显示。

一. 收费云平台

http://yun.foundertype.com/ 方正字体云服务，根据官方网站的介绍：

网页、APP因高质量字体而卓越，提供极致阅读体验。突破中文高质量字体需转化为图片的限制，兼顾体验与SEO，提升关键字搜索排名。方正字体云服务的官方平台方正是最大、最专业的中文字体提供商。

方正字体云服务大概提供有一百多种在线字体，但并没有提供公开报价。

https://www.justfont.com/ justfont，来自台湾的线上中文字体服务，有明确的报价（新台币）。也有一百种字体左右提供选择，注意要找那些简繁字体均有的。

其实两家服务都差不多，justfont在报价上比较透明，但支付方面恐怕比较麻烦。

那么，有没有办法让字体运行在自己的服务器端，然后文件又比较小的方案呢？答案是有的。

二. 中文webfont的解决方案:字体子集化

中文三大家网络公司都有提供字体子集化的服务。所谓字体子集化就是简化字体，将不需要的字从字库剔除，提取仅需要的文字另存为新的字体文件，字体当然就小了。

腾讯：font-spider
百度：font-min
阿里巴巴：icon-font font-carrier

以上三家各有优劣，其中腾讯的font-spider的优化核心是用的百度的font-min，从使用方便、功能适用，推荐腾讯的font-spider。

font-spider官方介绍：字蛛是一个智能 WebFont 压缩工具，它能自动分析出页面使用的 WebFont 并进行按需压缩。

现在我们来演示一下如何使用font-spider，下面的例子用的是windows操作系统进行操作。

安装好了node.js之后，用win+R运行cmd，在命令提示符中输入以下代码，安装font-spider。

npm install font-spider -g

假设我在c:\web文件夹里面有3个文件，一个css文件，一个html文件，以及一个全字库的字体文件（放在font文件夹里面）。下面是CSS文件的代码：

  /*使用选择器指定字体*/

  @font-face {
      font-family: '汉仪晴空体W';
      src: url('font/HYQingKongTiJ.eot');
      src: url('font/HYQingKongTiJ.eot?#font-spider') format('embedded-opentype'), url('font/HYQingKongTiJ.woff') format('woff'), url('font/HYQingKongTiJ.ttf') format('truetype'), url('font/HYQingKongTiJ.svg') format('svg');
      font-weight: normal;
      font-style: normal;
  }

  h1 {
      font-family: '汉仪晴空体W';
  }

这里是html代码

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css.css">
</head>

<body>
    <h1>新架构 全栈设计</h1>
</body>

</html>

在cmd窗口上输入：

C:\web>font-spider index.html

稍微运算一下，已经生成字体成功就如下图所示：

2.jpg

而原来字体文件已经存放在：.font-spider文件夹里面。

运行网页文件如下图所示：

3.jpg

这个方案的优点就是SEO完美，跟收费云字库并没有区别。

但其实在我的规划网站中，这个广告词是用“王漢宗特明繁體”字体的。遗憾的是，使用font-spider无论如何也输不出来。如果遇上兼容性问题，那么又该怎么处理呢？

三.图标字体一起打包成web字体

先上我的网站最终的效果图：

4.jpg

这个解决方案的灵感来自于Font Awesome图标文字。

通常项目都会加载图标字体文件，例如Font Awesome，使得网站的图标可以通过字体的形式来显示。可是用久了就会感觉浪费了，好多图标不是需要的，而我们网站需要的图标（如LOGO）却得去重新建个字体文件或者图片来完成。

这个方案的步骤比较繁琐：

Illustrator 输出SVG

打开Adobe Illustrator，新建一个配置文件为web的文件，我一般设置宽度高度均为200px。如果LOGO图标请先转为AI格式，如果是文字，选择字体后要注意需要创建轮廓。设计好了以后导出为svg格式即可。(不一定需要用Illustrator，可以导出为svg文件的软件都可以)

5.jpg

导入到IcoMoon

IcoMoon是一款免费的WEB APP，通过使用不同的设置，让我们能够创建出自定义的ICON字体。

网站地址: http://icomoon.io/app/

IcoMoon本身也有海量的图标，当然也包括Font Awesome。我非常喜欢Font Awesome的原因是：中文社区LOGO也包括其中，如QQ、微信、微博等。

点击IcoMoon的左上角Import Icons，选择刚刚保存的svg格式文件导入。

点击左下角的Add Icons From Library... ，选择Font Awesome，将需要的图标单击一下。选择完成后，点击Generate Font，生成字体后点击Download。

6.jpg

html 设置

下载的zip压缩包里面，有html,css以及字体所需的font文件，将font文件夹的所有文件拷贝到你项目的font文件夹里面，css文件重新改一个名称，例如：font.css。

加载css：

<link rel="stylesheet" href="css/font.css">

html引用：

<!--logo-->
                <div class="logo"><a href="#"><span class="axicon-logo">

                </span></a></div>
<!--巨幕广告-->
                        <h1>
                         <span class="axicon-xin"></span>
                         <span class="axicon-jia"></span>
                         <span class="axicon-gou"></span>
                         <span class="axicon-quan"></span>
                         <span class="axicon-zhan"></span>
                         <span class="axicon-she"></span>
                         <span class="axicon-ji"></span>
                         </h1>

span class要参考你刚刚下载的demo.html文件，一个图标对应一个或多个的class。

至此，已经顺利完成此方案的所有任务。

这种方案的优点是几乎能完成所有你需要的任何要求，缺点是操作繁琐，还有一个SEO的问题。

但是，配合CSS的话，SEO并不会是一个问题~~

个性化html web中文字体的几个解决方案

一. 收费云平台

二. 中文webfont的解决方案:字体子集化

三.图标字体一起打包成web字体

猜你喜欢

热点阅读