什么是在线字体

  • 2018-07-12 19:01:33
  • 阅读次数:
  • 作者:盈岚科技小编
  • 来源:http://www.lyjtt.cn

在线字体

在线字体又叫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的矢量图标,将使您的网站在视网膜级的高分屏上大放异彩。

当前文章标题:什么是在线字体

当前URL:http://www.lyjtt.cn/news/wzzz/what-web-font.html

上一篇:在网站设计中正确运用HTML标签

下一篇:昆明做网站要多少钱?(一)对重新做网站前需要思考的问题

网站建设、网络营销咨询专线:181-8386-5875(点击可一键拨号)