欢迎访问星梦天空网站,IT信息,WordPress教程,绿色软件,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站。如果本站对你有帮助请点击广告支持一下!

教你把有字库的字体缓存在本地调用

Wordpress 星梦小智 1407次浏览 5个评论 扫描二维码
中文的webfont只有一家:有字库。号称是网页在线引用、无需下载全球第一中文web font服务平台。

教你把有字库的字体缓存在本地调用

但是目前引用有字库的字体会出现打开网站慢的情况,然后就可以折腾想办法把字体缓存在本地调用,废话少数,直接进入主题。

首先,你先得同步方式引用字体。具体方法参考有字库方法。

教你把有字库的字体缓存在本地调用

教你把有字库的字体缓存在本地调用

然后用火狐浏览器查看源代码!找到有字库的引用CSS,直接点击进去。注:一定要火狐浏览器,因为要下载的是woff格式字体。

教你把有字库的字体缓存在本地调用
教你把有字库的字体缓存在本地调用

那bmp图片地址就是字体地址,把他下载下来,然后把它改为woff格式。

然后进入http://fontfacegen.com/woff-to-ttf-converter转换为ttf、svg、eot、otf字体。
把这种字体放在主题fonts文件夹下,新建一个CSS样式在主题与style.css同一目录。格式如下

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

修改下style.css下要调用的地方为(fontxmbt需和上面定义名为一样)

font-family:fontxmbt;

最后在header.php/head前引用新的样式即可。

<style type="text/css">调用的CSS样式</style>

到此教程结束了。PS:该方法字只适用少量字体引用!转载请尊重劳动成果。


星梦天空 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明本文链接
喜欢 (20)or分享 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

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

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(5)个小伙伴在吐槽
  1. 认真学习下,一直挺想要了解下这个,因为咱正好用得着它哩。
    我爱动感单车网 xp chrome  2016-09-14 08:47 回复
  2. 问下楼主,问什么ie浏览器不兼容?
    刘亚萍 win-4 firefox  2015-08-28 20:06 回复
  3. 博主你好,我根据你的步骤已经把文件格式转换了,但是在引用和写CSS这块可能有错误,没有成功,可以给我个QQ,我加你QQ然后你教一下我好吗?
    玩机达人网 win-5 chrome  2015-06-13 21:23 回复
    • :arrow: 可惜我没什么时间!抱歉,有空更新文章。
      星梦小智 win-4 chrome  2015-06-29 08:06 回复
  4. 成功了
    同盟源 win-5 chrome  2015-06-12 22:22 回复