今天有个小伙子私聊我这个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删掉图中的代码

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

font-family:nexzhu;

然后把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域名改成你自己的，路径一定要对！

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

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

以上教程来自:酷库博客

分享到：

赞 (2) 打赏 搜一下