天兴工作室:提供zblog模板 emlog模板 dedecms模板的下载和仿站定制 | RSS订阅 | 网站地图 | 联系我们
天兴工作室自用主题2015版上架销售
当前位置:网站首页 教程 正文

zblog使用谷歌在线字体库调用在线字体的方法

天兴工作室 1年前 (2015-07-14) 教程 1151 ℃ 1 评论
内容加载中......

网站想要个性化,使用个性的字体当然就是最好的表述方法了。但是网页里面显示的字体调用的是访客电脑里面已经安装的字体,如果你调用的字体访客电脑里面没有安装,那当然是显示不出来的。所以这个时候我们就需要用到谷歌在线字体库

补上一句:谷歌真是大大的良心。

再补充一句:由于一种你懂的原因,所以谷歌的服务现在在天朝是用不了的。so...

还好360来凑了一腿,推出了”360网站卫士常用前端公共库CDN服务“,又可以快乐的使用谷歌在线字体库了。

在正式开始之前必须要啰嗦以下:谷歌在线字体库只支持英文,中文这种几千个基本字的语言太庞大了,还是不要作死的好。zblog使用谷歌在线字体库调用在线字体的方法如下:

在head里面加入引用:

 <link href='http://fonts.useso.com/css?family=Lobster' rel='stylesheet' type='text/css'>

代码解释:family=Lobster中的”Lobster“为字体名称,可根据自身需求修改成你想要调用的字体名称。有几种拓展用法:

  1. 调用多个字体用|隔开,举例:family=Lobster|laoui;

  2. 字体名称中间的有空格的需要用+号代替空格:family=Lobster+UI;

  3. 只需要调用字体里面几个字母的还可以这样:family=Lobster'&text=abcd;

引用完成了就可以在具体位置调用的,譬如这样:我们要把某个div里面的文字全部设置成新的自定义字体,div的class为”ziti“,那么css就是这样写:

.ziti{font-family: Lobster, cursive;}

请务必注意,在调用自定义字体的后面一定要加上一个安全字体以防万一。什么是安全字体?就是几乎所有的电脑都会有的字体就叫安全字体,例如宋体就是标准的安全字体。

最后的最后说上一句,想选择一个符合自己个性的字体请前往谷歌在线字体库官方网站:http://www.google.com/fonts/。呵呵呵呵,由于你懂的原因,要翻墙额!

这样zblog调用谷歌在线字体库的自定义字体就完成了,最后上一张图展示成果。

QQ截图20150714230500.png

我要提问 如果你对于此文还有任何疑问欢迎在文章下面的评论区域留言,如果你的疑问比较多,欢迎在本站的在线提问专业去发布问题,点击右侧的我要提问即可到达。天兴工作室将尽我所能为你解答问题。

本文标签谷歌在线字体库

本文地址http://www.txcstx.cn/post/801.html

版权说明:如非注明,本站文章均为 天兴工作室 原创,转载请注明出处和附带本文链接。

我猜你还喜欢这些...

哈哈,本文已有 1 位小伙伴发表了看法:

1#哈萨克斯坦商务网 (游客)  评论于 2015-08-02 11:22:06回应ta
我是第一个,啦啦,支持一下正在学习的我把

欢迎 发表评论

必填

选填

选填

必填

◎欢迎在这里交流反馈,垃圾评论会秒删的额...

联系我们
最新评论
标签云
zblog购买应用伪静态写博客bxSlider下载zblog2.0下载本地套餐手机冲浪emlog主题飞Young冬天合家欢w619wang虚假宣传wordpress转zblog小米手机热门文章什么是T东湖年票电信3GXT502zblog如何添加广告位工商局自助缴费不同IP虚拟主机幻灯片代码阿里云服务器404页面放假团购活动刘冬主机特价长途天下网商存话费送手机zblog淘宝客
热门模板