在线字体

在线字体又叫web font或网络字体，是CSS3中的一个模块，主要是把自定义的特殊字体嵌入到网页中。

免安装、免下载、直接在线使用。

由于设计的需要，网站中难免会用到一些比较特殊的字体（如方正字库）来装饰我们的网站，让其更加美观，我们可以用CSS的font-family属性来设置文本字体。然而设置的字体如果是用户的电脑上没有安装的字体，那么对不起，文字将以宋体呈现，这大大的影响了用户体验。

我们经常能看到国外的一些网站使用了非常漂亮的字体，而这些字体通常在用户的电脑中是没有安装的，如何实现的？如何让特殊字体在网页客户端显示？目前方案有两种：

制作图片嵌入网页。

引用在线字体。

第一种方案生成图片是现在主流的中文字体解决方案，但是有很大的缺陷，维护麻烦、不利于SEO。

第二种方案在线字体是一种创新的解决方案，在国外已经相当流行，包括Google fonts、Adobe typekit等知名服务商。

通过上传字体文件到指定目录，然后在CSS中用规定格式进行引用就可以使字体效果跃上你的页面了，使网页用字不再受客户端影响。

这么酷的东东，为什么以前都不曾了解？

因为中文字体过于庞大，小则三五兆，大则十几兆，所以在线字体只流行于英文网站，虽然中文网页设计师望眼欲穿，但也无可奈何。临渊羡鱼，不如退而结网，而现在我们通过按需截取的方式生成小字库，可以小到几十K，甚至几K，终于有效控制了字体文件的大小，使中文也加入了网络字体的阵营。

国内主流浏览器都支持吗？比如：IE、360、搜狗、火狐、chrome、safari、Opera。答案是：YES!!

了解浏览版本支持详情

360安全浏览器1.0及以上    支持    

360极速浏览器1.0及以上    支持    

搜狗浏览器1.0及以上    支持    

Chrome3.0及以上    支持    

FireFox3.5及以上    支持    

Safari3.1及以上    支持    

Android2.2及以上    支持    

IOS4.2及以上    支持    

在线字体的优势

不是图片，是文字

不是生成图片，而是使用真正的文本，您可以像文本一样复制粘贴。现在国内已有一些将中文字体做成图片的网站，但是这种方法有太多弊端，我们摒弃这种即将被淘汰的方法，让中文也能像国外网站中的英文一样在线使用。

优化搜索引擎排名

虽然图片也可以呈现中文字体，但是Google、百度等搜索引擎无法辨认出图片的文字内容，无法搜索到网站相关内容。 使用网络字体（web font），则是呈现的真实的文字，无论是标题、内容都适合引用。

无级缩放不模糊

图片在放大和缩小的过程中会产生变形或马赛克，网络字体（web font）采用的是矢量字体，支持无级缩放，不管放多大或缩再小都不会产生变形或模糊，给用户一致的体验。

改善使用体验

图片在高分辨率的视网膜屏幕中，常遇到分辨率不足的状况；网页字体则以矢量字在网页中真实呈现，根据浏览分辨率做实时的字体描绘，无论放大到任何尺寸都能清晰分明。

编辑更方便，维护更简单

图片每次都得重新编辑和生成，哪怕是一个字的更改，耗费人力和时间，扩展很不方便，而在线字体（web font）是真正的文字，随时可添加更改，这节约的不只是人力成本，更是时间成本。

Font Awesome-一套绝佳的图标字体库和CSS框架

Font Awesome为您提供可缩放的矢量图标，您可以使用CSS所提供的所有特性对它们进行更改，包括：大小、颜色、阴影或者其它任何支持的效果。

一个字库，675个图标

仅一个Font Awesome字库，就包含了与网页相关的所有形象图标。

无需依赖JavaScript

Font Awesome完全不依赖JavaScript，因此无需担心兼容性。

无限缩放

无论在任何尺寸下，可缩放的矢量图形都会为您呈现出完美的图标。

如言语一般自由

Font Awesome完全免费，哪怕是商业用途。请查看许可。

CSS控制

只要CSS支持，无论颜色、大小、阴影或者其它任何效果，都可以轻易展现。

高分屏完美呈现

Font Awesome的矢量图标，将使您的网站在视网膜级的高分屏上大放异彩。