影戏拍客 > 记事本 > 下载有字库的字体文件到本地CSS调用,有字库使用方法
首先登陆 http://www.youziku.com/ 有字库网站,选择你喜欢使用的字体,输入的需要显示的文字,文字不需要重复的,需要使用的字只写一次就可以,可以写好但暂时不用的文字。

1.png

写好后点生成,得到如下。


然后用浏览器直接打开css链接,或者用迅雷等下载工具下载这个CSS连接,如图蓝色部分:

1.png

直接打开后或者下载后用记事本等文本编辑器打开,复制 format('truetype') 属性的.jpg链接下载保存为.ttf格式,如图蓝色部分:


QQ截图20180619095055.png


/* 本css可能会根据不同浏览器以及不同版本自动生成对应调用代码*/

复制如://cdn.webfont.youziku.com/webfonts/nomal/3803/47064/5b285f6bf629d90f04e3ee7d.jpg?r=77766123094

直接浏览器打开或者迅雷等下载工具下载这个.jpg链接,另存为 *****.ttf 文件,保存文件名随便自己想象,就是等于字体的名字。

如:下载另存为保存文件 yxpk.ttf 格式,就是:yxpk.ttf


或者下载woff文件,然后到网站https://www.fontke.com/tool/convfont/ 转换成ttf文件。


下载得到 yxpk.ttf 字体后进入 http://www.freefontconverter.com/ 上传 yxp.ttf文件 转换, 下载解压会得到.ttf, .otf, .eot, .woff, .svg格式。


下载后解压得到的.ttf, .eot, .woff, .woff2, .svg字体文件上传到主题的fonts文件夹里。

然后在style.css文件里找到.yusi-mono和.yusi-bloger加入字体的标签属性font-family:'**********';
.yusi-mono和.yusi-bloger可以同用一个字体样式,也可以分别设置不同的字体样式。

在你的CSS文件前面加入:


@font-face {@font-face {@font-face {
font-family: 'Conv_yxpk';
src: url('fonts/yxpk.eot'); /* IE9 Compat Modes */
src: url('fonts/yxpk.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
             url('fonts/yxpk.woff') format('woff'), /* Modern Browsers */
             url('fonts/yxpk.ttf')  format('truetype'), /* Safari, Android, iOS */
             url('fonts/yxpk.svg#yxpk') format('svg'); /* Legacy iOS */
   }
}

使用的时候记得修改字体标签属性font-family:**********;

.yusi-mono{font-family:Conv_yxpk;……}
.yusi-bloger{font-family:Conv_yxpk;……}


这样就不会过多link调用.css文件,对SEO来说和打开网页加载速度都有好处的,早就想写了,一直没空处理,言语层次不明朗,看不明白的你就多看几遍!


201800619针对有字库最新方式更新

既然来了就说点什么吧………
挤眼 亲亲 咆哮 开心 想想 可怜 糗大了 委屈 哈哈 小声点 右哼哼 左哼哼 疑问 坏笑 赚钱啦 悲伤 耍酷 勾引 厉害 握手 耶 嘻嘻 害羞 鼓掌 馋嘴 抓狂 抱抱 围观 威武 给力
提交评论
笔途文摘
笔途文摘河南省信阳市 联通2014-09-30 21:12回复
#6
每次来都有新收获
王小建
王小建内蒙古自治区乌海市 电信2014-09-16 19:45回复
#5
下载上了
王小建
王小建内蒙古自治区乌海市 电信2014-09-16 19:42回复
#4
显示的链接错误!!
メ﹎暖阳ゝ
メ﹎暖阳ゝ广西壮族自治区柳州市 电信2014-09-16 19:29回复
#3
用下载工具,比如可以用迅雷下载。
王小建
王小建内蒙古自治区乌海市 电信2014-09-16 19:16回复
#2
下载后打开8458425c835e2a05f7bf459c5a1df3a2这个文件得到。。。。。。这个下载不到啊
故事会在线阅读
故事会在线阅读江苏省常州市 电信2014-09-15 21:09回复
#1
这个不错 学习了 以后使用字体也方便了