[图文]有字库,Wordpress网页CSS字体在线引用教程

很多小伙伴都反应不会用有字库,不知道怎么引用,今天微饭教大家如何简单快捷的使用有字库的在线字体库。

关于有字库

有字库是全球第一中文web font(网络字体)服务平台。我们致力于美化网页界面,降低网页设计和维护的难度,同时提升效率。web font 的服务在国外已经比较普及, 著名的有google fonts、typekit等网站,但是国内在中文web font上面一直是一片空白,众多中文网站设计者们只能望洋兴叹。 有字库为此应运而生。

有字库使用教程

第一步、注册及登陆(可忽略)

这个大家自己应该都会。。

第二步、寻找字体并使用

a1选择自己喜欢的字体,点击立即使用

第三步、生成CSS字体

a2

可以生成自己想要的字体,比如头部网页标题等、点击生成。

第四步、引用加载字体

a3

本节第一步有两种使用方法,调用CLASS和添加标签属性,如果没有特殊设置建议给标签引用CLASS即可,即第二个方法

 第五步、头部加载CSS文件

a4

图示已标明清楚,自己参照即可。

第六步、为标题添加样式

这是引用第一种方法

a6

这是引用第二种方法

a5

大家可以根据以上方法,融会贯通,即可达到自己想要的效果~~~~

发表评论
加载中...
  • -嘘,咱低调点 3年前 (2014-11-26)

    感谢站长分享知识:第二步在头部插入代码可以看明白,但第一步看不明白,能否请教一下, 在以下位置怎么插入第一步的代码?我是用的欲思主题:h1{display:inline-block;padding:30px 0 20px 0;cursor:pointer;font-family:’Handlee’,”微软雅黑”,”Microsoft Yahei”,arial,sans-serif;font-weight:100}.yusi-mono{letter-spacing:-2px;position:relative;color:#fff;font-size:54px;text-shadow:0 0 1px rgba(94,255,216,0.8);margin:0;padding:0;z-index:0;-webkit-transition:all .1s ease-out;-moz-transition:all .1s ease-out;-o-transition:all .1s ease-out;-ms-transition:all .1s ease-out;transition:all .1s ease-out}.yusi-bloger{position:relative;color:#1ABC9C;font-weight:normal;font-size:24px;text-shadow:0 0 1px rgba(94,255,216,0.8);margin-left:-6px;letter-spacing:-2px;padding:0;z-index:2;-webkit-transition:all .5s ease-out;-moz-transition:all .5s ease-out;-o-transition:all .5s ease-out;-ms-transition:all .5s ease-out;transition:all .5s ease-out}.yusi-logo h1

    查看对话
    • -嘘,咱低调点 3年前 (2014-11-26)

      请问第一步的代码是否在style.css中以上的代码段中插入?请教是具体哪个位置,我经过多次尝试都无法变更字体。多谢多谢!

      • 微饭君 微Fan 3年前 (2014-11-26) 官方

        可以参阅第六步图片所示

相关文章