• 没啥好说,更新慢

使用WebFont中文云端字体美化你的网站

实用教程 每天学 来源:原创 7个月前 (02-19) 344次浏览

在线字体(Web Font)

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

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

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

  • 制作图片嵌入网页。
  • 引用在线字体。

第一种方案生成图片是现在主流的中文字体解决方案,但是有很大的缺陷,维护麻烦、不利于SEO,因为蜘蛛不知道你图片上写的是什么玩意。

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

通过上传字体文件到指定目录,然后在CSS中用规定格式进行引用就可以在你网站中看到字体,使网页的字体显示不再受客户端的限制。

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

这款字体支持国内主流浏览器,例如:IE、360、搜狗、火狐、chrome、safari、Opera。

速度测试

可以看出来这是CNAME记录,而且用的是阿里云CDN,速度差不到哪去,本站也是用的阿里云CDN。
使用Ping命令测试

如何使用

第一步

进入官网 https://www.webfont.com/ ,注册账号并且登录

选择一款字体,立即使用

使用一个在线字体

获得了调用方法

在线字体的调用方法

根据描述的来就可以了,CSS模式稍微特殊一点,需要先输入需要生成的字,然后会给你一段可以引入的Script标签,最后的效果可以参考本站的Logo。

要钱吗

这个设计很精,是每月送100库币,浏览都会消耗库币。所以一开始生成的字体是免费用的,但是一但用CSS模式生成好字了,你这个月100库币用完了,那么对不起,你的字就不能变换了。最低的套餐是40一个月,对于普通的个人用户来说还是太贵了。


每天学 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:使用WebFont中文云端字体美化你的网站
赞(1)
分享到: 更多 (0)

为了阻止垃圾和反动评论,您必须才能发表评论,使用功能只需要1分钟注册好账号!