如何下载有字库的字体文件

只是因为现有主题使用英文做博客名称时的字体比较漂亮,我差一点放弃使用了好多年的中文名从良未遂。也不是漂亮的中文字体不好找,但是找到的体积都比较大,加载起来比较慢而且费流量。

在线云端字体服务是一个比较理想的解决方案而无需使用图片。现在英文的云端字体服务很流行,英文只有26个字母,一套字体不过几十KB,而汉字却有数万个,导致字体文件通常有好几MB大小,文件体积比英文字体大数百倍,按照中国网络环境的现状,用于实际项目中比较困难。

国内目前有两家公司提供中文 WebFont 云托管服务,他们能够压缩与转码字体:有字库就是字。个人认为,前者的服务相对较好,使用也比较方便,具体字体和使用方法官网有详细说明。

有字库提供了两种常用的调用方式:CSS模式 和JS模式 。这两种都是在线调用,又会多Lnk一个CSS文件,对SEO和网页加载速度都不太友好。那么如何把有字库里喜欢的字体下载下来呢?

1、登陆有字库网站,选择喜欢使用的字体,选择CSS模式 ,输入的需要显示的文字:



2、点击“生成”,得到如下图所示的结果:

3、下载红色横线的css文件,内容如下图所示:

@font-face {font-family: 'lixukexingshucbcceba141a255';
src: url('//cdn.webfont.youziku.com/webfonts/nomal/107093/45807/599fa748f629d8178ce2ecb2.gif?r=52028872290');
src: url('//cdn.webfont.youziku.com/webfonts/nomal/107093/45807/599fa748f629d8178ce2ecb2.gif?r=52028872290?#iefix') format('embedded-opentype'),     
url('//cdn.webfont.youziku.com/webfonts/nomal/107093/45807/599fa748f629d8178ce2ecb2.bmp?r=52028872290') format('woff'),     
url('//cdn.webfont.youziku.com/webfonts/nomal/107093/45807/599fa748f629d8178ce2ecb2.jpg?r=52028872290') format('truetype'),     
url('#lixukexingshu') format('svg');   }.csscbcceba141a255{font-family: 'lixukexingshucbcceba141a255';}

4、下载代码里的.bmp文件:

//cdn.webfont.youziku.com/webfonts/nomal/107093/45807/599fa748f629d8178ce2ecb2.bmp

5、下载完成后把后缀.bmp改为.woff,主题CSS文件里调用:

/* 博客标题字体引用 */
@font-face {font-family: Graviola Soft Thin;src: url(fonts/Graviola.woff);}
.site-title a{font-family: Graviola Soft Thin;font-weight: 600;}

一般说来,修改后缀上传到空间就可以使用,不行的话就转换格式,推荐网址:Cloudconvert。演示可以查看首页顶部的博客名称:从良未遂更帅了!



11 条评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注

返回主页看更多
狠狠的抽打博主 支付宝 扫一扫