如何修改emlog博客网站字体样式更改教程,附字体包 - 技术分享 - 五行资源分享网



如何修改emlog博客网站字体样式更改教程,附字体包

作者头像图片

作者: 五行

网络资源搬砖的爱好者

文章二维码手机扫码查看

特别声明:文章多为网络转载,资源使用一般不提供任何帮助,如有侵权请联系!

如何修改emlog博客网站字体样式更改教程,附字体包-五行资源分享网-第1张图片

 

今天有个小伙子私聊我这个emlog博客的fee主题怎么修改网站css字体样式,所以就打算发一下这个帖子,看惯了千篇一律的宋体、微软雅黑等系统自带的字体,想换一个彰显个性的字体,这个教程也是酷库博客的站长教我的,教程有点长,慢慢看,小白式操作!详细修改后的字体效果请查看本站。

 

教程开始

第一步:下载自己喜欢的字体,字体格式为.ttf,这里推荐一个字体网站非常的不错:http://www.zhaozi.cn/s/all/ttf/

 

也可以下载本站正在使用的字体:抱歉,隐藏内容 回复 后刷新可见


先把字体包下载上传服务器 再把调用字体代码加到css里面 把字体文件URL改一下 把font-family也加里面

 

第二步:转换字体

将下载好的字体转换成.eot、 .woff、 .woff2三种格式,文件名可以是任意英文,没有特殊要求,可以根据自己的喜好命名(不要设置为中文就可以了)。这里推荐一个在线转化的网站:https://www.fontke.com/tool/convfont/

 

第三步:上传字体

将转换好的.eot、 .woff、 .woff2三种格式字体上传到自己网站任何位置,只要和后面的代码路径一致就可以了。

第四步:调用代码

打开网站/博客主题CSS文件里面的style.css文件(不同程序命名可能不一样),fee主题css文件是mian.css在最下面(位置没有固定要求)放入以下代码

 

@font-face {
font-family: "light (字体名字可自行修改)";
src: url(https://light.woff2(根据自己的字体路径修改)) format("woff2"),
url(https://light.woff(根据自己的字体路径修改)) format("woff"),
url(https://light.ttf(根据自己的字体路径修改)) format("truetype"),
url(https://light.eot(根据自己的字体路径修改)) format("embedded-opentype"),
url(https://light.svg(根据自己的字体路径修改)) format("svg");
}

 

上面的代码里.ttf和 .svg的文件是没有的,但是路径要和.eot、 .woff、 .woff2三种格式路径保持一致,否则字体将不会正常显示。

然后继续在style.css文件里添加以下代码

body { 
font-family: light(名称和上面字体名称一致)!important; 
}

 

 

如果CSS文件本身就有body {的话就把font-family: light(名称和上面字体名称一致)!important;添加到原有的body {里面。

 

 

 

分享目前五行资源博客fee2.0模板用的字体用法,字体下载在上面的第一步方法!

用法:

放到主题样式里面(fee主题的css样式文件是mian.css):

@font-face {
font-family: "nexzhu";
src: url(../spimes/fonts/blockdole.woff2) format("woff2"),
url(../spimes/fonts/blockdole.woff) format("woff"),
url(../spimes/fonts/blockdole.eot) format("embedded-opentype"),
url(../spimes/fonts/blockdole.svg) format("svg");
}

 

webmo字体用法

@font-face {
font-family: 'webmo';
font-display: swap;
src: url('../fonts/webmo.eot');
src: url('../fonts/webmo.eot?#iefix') format('embedded-opentype'), 
url('../fonts/webmo.woff2') format('woff2'),
url('../fonts/webmo..woff') format('woff'),
url('../fonts/webmo..ttf') format('truetype'),
url('../fonts/webmo..svg') format('svg');
}



路径呢,自己改,每个主题文件夹都不同

其中blockdole.svg是没有的,但是缺少这一行,又不会显示,所以可以自行研究一下

然后再在body里面定义

 

 

然后在mian.css删掉图中的代码

如何修改emlog博客网站字体样式更改教程,附字体包-五行资源分享网-第2张图片

 

 

然后在body{后加上上面代码

font-family:nexzhu;

 

如何修改emlog博客网站字体样式更改教程,附字体包-五行资源分享网-第3张图片

 

然后把mian.css文件滑到最底下,在最底下复制下面代码加上去!

 

@font-face {  font-family: "nexzhu";  src: url(https://wep.vipyshy.com/content/templates/fee/static/fonts1/blockdole.woff2) format("woff2"),       url(https://wep.vipyshy.com/content/templates/fee/static/fonts1/blockdole.woff) format("woff"),       url(https://wep.vipyshy.com/content/templates/fee/static/fonts1/blockdole.eot) format("embedded-opentype"),       url(https://wep.vipyshy.com/content/templates/fee/static/fonts1/blockdole.svg) format("svg");}

 

注意,把wep.vipyshy.com域名改成你自己的,路径一定要对!

 

浏览器缓存重新打开网站就行了

 

注意一下,字体很耗网站流量!

以上教程来自:酷库博客

分享到:
打赏
未经允许不得转载:

作者: 五行, 转载或复制请以 超链接形式 并注明出处 五行资源分享网
原文地址: 《如何修改emlog博客网站字体样式更改教程,附字体包》 发布于2022-4-27
帖子声明: 本站对文章进行整理、排版、编辑,是出于传递信息之目的, 并不意味着赞同其观点或证实其内容的真实性,不拥有所有权,不承担相关法律责任。

评论

97 + 87 =
  1. #1
    石家庄市 游客 Lv.1

    滴!学生卡!请上车的乘客系好安全带~


切换注册

登录

忘记密码?

您也可以使用第三方帐号快捷登录

一键注册
切换登录

注册

用户登录验证码图片

 

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏