对于博客的建设主要方便访客高质量的阅读,所以对字体的选择也是非常重要。大多数站长在使用博客初期,喜欢魔改美化自己的网站,因此本期站长给大家出一期,如何给自己的博客资源网自定义自己喜的字体。
教程开始
1.首先下载自己喜欢的字体包,
在这里我给大家推荐一款免费的字体下载工具站:找一下看适合的字体下载即可。
2.转换字体包格式
当我们下载字体之后会有一个压缩包 里面会有一个.ttf 的字体文件包,因为有些浏览器不支持这种字体的格式显示 所以我们需要对字体格式转换,如果不进行转换字体格式,有些浏览器会无法显示自己设置的喜欢的字体 如果你毫无技术不会转换字体格式不要怕,这里提供一个免费快捷的字体转换网站
你只需要转换.ttf 文件为 eot,woff,woff2,svg,tff 以上格式随便一种 如下图,我已经用红色框框给你标记,按图操作即可
![WordPress给你的博客网站换个漂亮的字体[WP美化]-觅知博客 WordPress给你的博客网站换个漂亮的字体[字体美化]插图](https://soujiz.com/wp-content/uploads/2022/09/20220924103604.jpg)
3.网站调用字体地址
把你转换好的 5 个字体文件放在自己网站随便那个文件夹内,只需要记住地址就行,比如:根目录下的-案例:https://soujiz.com/fzlty.ttf
如果是 WordPress 子比主题的话直接把下面的 css 代码放在自定义 css 样式中:
路径:后台主题设置—>自定义代码—>自定义 CSS 样式代码把下面的代码添加到里面,然后刷新页面即可
/*全站字体美化开始*/@font-face{font-family: 'moe';src: url('https://soujiz.com/fzlty.ttf'); /*测试地址,请以自己的字体地址为准!*/src: url('https://soujiz.com/fzlty.otf');src: url('https://soujiz.com/fzlty.dfont');src: url('https://soujiz.com/fzlty.eot');src: url('https://soujiz.com/fzlty.svg');src: url('https://soujiz.com/fzlty.woff');src: url('https://soujiz.com/fzlty.woff2');}body{font-family:'moe';}.enlighter-default .enlighter{max-height:400px;overflow-y:auto !important;}.lazyloading:not(.swiper-lazy-loaded){opacity: 0;}@media (max-width:640px) {.meta-right .meta-view{display: unset !important;}}/*全站字体美化开始*//*全站字体美化开始*/ @font-face{ font-family: 'moe'; src: url('https://soujiz.com/fzlty.ttf'); /*测试地址,请以自己的字体地址为准!*/ src: url('https://soujiz.com/fzlty.otf'); src: url('https://soujiz.com/fzlty.dfont'); src: url('https://soujiz.com/fzlty.eot'); src: url('https://soujiz.com/fzlty.svg'); src: url('https://soujiz.com/fzlty.woff'); src: url('https://soujiz.com/fzlty.woff2'); } body{ font-family:'moe'; } .enlighter-default .enlighter{max-height:400px;overflow-y:auto !important;}.lazyloading:not(.swiper-lazy-loaded){opacity: 0;}@media (max-width:640px) { .meta-right .meta-view{ display: unset !important; } } /*全站字体美化开始*//*全站字体美化开始*/ @font-face{ font-family: 'moe'; src: url('https://soujiz.com/fzlty.ttf'); /*测试地址,请以自己的字体地址为准!*/ src: url('https://soujiz.com/fzlty.otf'); src: url('https://soujiz.com/fzlty.dfont'); src: url('https://soujiz.com/fzlty.eot'); src: url('https://soujiz.com/fzlty.svg'); src: url('https://soujiz.com/fzlty.woff'); src: url('https://soujiz.com/fzlty.woff2'); } body{ font-family:'moe'; } .enlighter-default .enlighter{max-height:400px;overflow-y:auto !important;}.lazyloading:not(.swiper-lazy-loaded){opacity: 0;}@media (max-width:640px) { .meta-right .meta-view{ display: unset !important; } } /*全站字体美化开始*/
注:(非常重要)font-family 是自定义字体名称(自己修改),url 这是字体文件的地址(自己修改),*这是全局显示。
免教程直接使用版本
直接将代码防止到网站合适位置调用,使用同第三步。以下设置字体代码中的字体文件已经处理过,放置在jsdelivr托管平台了。不乏后期会挂掉,如果设置不生效了,请使用上面教程来更换字体文件地址使用。
/*字体*/@font-face {font-family: 'moonbridge';src:url('https://cdn.jsdelivr.net/gh/TaylorLottner/CDN@master/TYPES/moonbridge/moonbridge.woff2') format('woff2'),url('https://cdn.jsdelivr.net/gh/TaylorLottner/CDN@master/TYPES/moonbridge/moonbridge.woff') format('woff'),url('https://cdn.jsdelivr.net/gh/TaylorLottner/CDN@master/TYPES/moonbridge/moonbridge.ttf') format('truetype');font-weight: normal;font-style: normal;font-display: swap;}:not(i) {font-family: "moonbridge";}/*字体*/ @font-face { font-family: 'moonbridge'; src: url('https://cdn.jsdelivr.net/gh/TaylorLottner/CDN@master/TYPES/moonbridge/moonbridge.woff2') format('woff2'), url('https://cdn.jsdelivr.net/gh/TaylorLottner/CDN@master/TYPES/moonbridge/moonbridge.woff') format('woff'), url('https://cdn.jsdelivr.net/gh/TaylorLottner/CDN@master/TYPES/moonbridge/moonbridge.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: swap; } :not(i) { font-family: "moonbridge"; }/*字体*/ @font-face { font-family: 'moonbridge'; src: url('https://cdn.jsdelivr.net/gh/TaylorLottner/CDN@master/TYPES/moonbridge/moonbridge.woff2') format('woff2'), url('https://cdn.jsdelivr.net/gh/TaylorLottner/CDN@master/TYPES/moonbridge/moonbridge.woff') format('woff'), url('https://cdn.jsdelivr.net/gh/TaylorLottner/CDN@master/TYPES/moonbridge/moonbridge.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: swap; } :not(i) { font-family: "moonbridge"; }
暂无评论内容