可搜索,可注册,可登录,致敬逗比大佬!尽在救援版逗比根据地 dbgjd.com
投稿文章 | 广告合作 | Telegram 群组 / 公告频道 / 使用教程

逗比根据地网站标题有字库字体效果怎么实现

News Toyo+ 133℃ 0评论

很多朋友经常夸逗比根据地的网站做的很好看,也有一些朋友询问逗比根据地的网站标题到底怎么实现的。

“逗比根据地”五个大字,采用的是“金梅毛行破裂字形”字体; “- 世界那么逗,我想出去看看” 的采用的是LiDeBiao字体,它们不是图片,也不是动画,而是文字,下面我来说说我是怎样改成这个效果的。这里统一回答实现方法。

第一步:使用欲思君发布了wordpress欲思博客主题。教程略。

第二步:有字库字体网站生成一个“逗比根据地”5个文字的字体文件,一个“- 世界那么逗,我想出去看看”一行文字的字体文件,远程调用使用。

有字库网站,注册登录后就可以使用。首先在“在线字库”中找到您中意的字体,然后选择“使用”,他有两种调用模式。

分别拿到“逗比根据地”5个文字的字体文件的代码,和一个“- 世界那么逗,我想出去看看”一行文字的字体文件的调用代码。按照下面格式改成您的代码之后,粘贴在<head></head>头文件之间即可实现。

<link href=’http://cdn.webfont.youziku.com/webfonts/nomal/129506/46489/5cea598ef629d807dc740eaf.css’ rel=’stylesheet’ type=’text/css’ /> <!–“逗比根据地” 的代码–>
<link href=’http://cdn.webfont.youziku.com/webfonts/nomal/129506/45803/5cea59b2f629d807dc740eb1.css’ rel=’stylesheet’ type=’text/css’ /> <!–“- 世界那么逗,我想出去看看” 的代码–>
<style type=”text/css”>.yusi-mono{font-family:’jin_mei_mxplzx1998971d6a1f9e2′;}.yusi-bloger{font-family:’LiDeBiao-Xing3199897aa581f9e2′;}</style>

完成之后在自己的网站上刷新1-2次就可以看到效果了。

第三步:上面是引用有字库的字体,还是有那么一点点不放心,有时候会影响速度,甚至半天不显示那个字体,下面分享一个将这个字体弄到自己服务器的方法,这样就不用依赖别的服务器了。

有很多时候还是会遇到没有正常顺利加载的情况,何况,有字库经常删号,命运掌握在别人手上,总是不爽,我们要讲这个字体弄到我们自己的服务器中来,这样就可以和我们自己的网站同命运了。

这里的重点是会使用浏览器的“审查元素”功能,先打开自己的网站把字体加载完成,然后查看源码,或者在标题处点击审查元素,就会看到我们标题所调用的css,找到有字库的引用CSS,直接点击进去,就会看到形如 http://www.youziku.com/CSS/webfonts/2015-8-29/ee413664218d4c7eb2f0cd55f9485ff6 的css引用文件,

或者第二步中出现的js文件 :http://www.youziku.com/webfont/FastJS/a673e381e6574fa39c5290bf472950c3.js

这样的链接点进去,可以看到

window.$youziku || function (d) { var b = $youziku = { resUrl:"http://www.youziku.com/lib/", "_": [], v: [], nd: false, load:function(s, k, f,a){b._[s]={s: s,k: k,f:f,a:a||false};}, verify: function (s, k, f) { b.v[s] = {s:s,k:k,f:f}; }, draw: function () { b.nd = true; b.load = function (f) { }; }, css: function (c) { c = c + " "; var t = d.createElement('style'); t.setAttribute("type", "text/css"); d.getElementsByTagName("head")[0].appendChild(t); if (t.styleSheet) { t.styleSheet.cssText = c; } else if (d.getBoxObjectFor) { t.innerHTML = c; } else { t.appendChild(d.createTextNode(c)) } } }; var a = d.createElement("script"); a.setAttribute("type", "text/javascript"); a.setAttribute("src", b.resUrl + "youziku.lib.js"); d.getElementsByTagName("head")[0].appendChild(a) }(document); 
$youziku.css("@font-face {font-family: 'minijianlinxin422249';src: url('http://www.youziku.com/CSS/webfonts/2015-8-29/ee413664218d4c7eb2f0cd55f9485ff6/minijianlinxin.bmp') format('woff');font-weight: normal;font-style: normal;}");
$youziku.css("#navfont{font-family:'minijianlinxin422249'; }");
$youziku.verify("#navfont", "64d495c353be34f39ab1e20a2eab6f0d", "minijianlinxin");

把其中形如

http://www.youziku.com/CSS/webfonts/2015-8-29/ee413664218d4c7eb2f0cd55f9485ff6/minijianlinxin.bmp

下载下来,这个使用浏览器无法直接下载,使用下载工具下载,或者直接保存到本地,

然后把minijianlinxin.bmp改成minijianlinxin.woff 打开在线字体转换网站,分别转换成:eot otf svg ttf

然后把这5个字体复制到网站目录下的fonts中

再在网站<head>加上即可。

<style rel="stylesheet" type="text/css">
@font-face {
   font-family: 'fontname'; /* 要调用的字体样式名字,可自定义 */
   src: url(/Public/fonts/minijianlinxin.eot);   /* 注意字体命名是否一致,下同  */
   src: url(/Public/fonts/minijianlinxin.eot?#iefix) format('embedded-opentype'),
        url(/Public/fonts/minijianlinxin.woff) format('woff'),
    url(/Public/fonts/minijianlinxin.ttf) format('truetype'),
    url(/Public/fonts/minijianlinxin.svg#fontxmbt) format('svg');
   font-weight: normal;
   font-style: normal;
}
#zhfont {font-family:fontname;}
</style>

即可。

因为<!–“逗比根据地” 的代码–>  <!–“- 世界那么逗,我想出去看看” 的代码–>两个,所以得同样弄两次。比如,本站的效果代码是:

<style type=”text/css”>

@font-face {font-family: ‘jin_mei_mxplzx86d456993036’;src: url(‘fonts/d25cg45r.gif’);src: url(‘fonts/s5a_mob9d41d.gif?#iefix’) format(’embedded-opentype’), url(‘fonts/6sjoftzg.bmp’) format(‘woff’), url(‘fonts/a6fi06sp.jpg’) format(‘truetype’), url(‘fonts/n__jfhdk.png#jin_mei_mxplzx’) format(‘svg’); }.yusi-mono{font-family: ‘jin_mei_mxplzx86d456993036’;}

</style>

/* “逗比根据地” 的代码 */

<style type=”text/css”>

@font-face {font-family: ‘LiDeBiao-Xing320e75d0253036’;src: url(‘fonts/cdn0zg3k.gif’);src: url(‘fonts/shil52-cd41d.gif?#iefix’) format(’embedded-opentype’), url(‘fonts/5530yv9l.bmp’) format(‘woff’), url(‘fonts/aiz7tiqi.jpg’) format(‘truetype’), url(‘fonts/nms8xvbp.png#LiDeBiao-Xing3’) format(‘svg’); }.yusi-bloger{font-family: ‘LiDeBiao-Xing320e75d0253036’;}
tbody tr:nth-child(odd) { background-color:#f9f9f9; }

</style>

/* “- 世界那么逗,我想出去看看” 的代码 */

按照下面格式改成您的代码之后,粘贴在<head></head>头文件之间即可实现。有什么疑问可以留言询问。

转载请注明:逗比根据地 » 逗比根据地网站标题有字库字体效果怎么实现

喜欢 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址