WordPress给你的博客网站换个漂亮的字体2

大多数站长在使用博客初期,喜欢魔改美化自己的网站,博客的建设主要方便访客高质量的阅读 所以对字体的选择非常重要,本期博主给大家出一期如果给自己的博客资源网自定义自己喜欢的字体

教程开始

1.首先下载自己喜欢的字体包 在这里我给大家推荐一款免费的字体下载站

100字体下载站https://www.100font.com/

2.转换字体包格式
当我们下载字体之后会有一个压缩包 里面会有一个.ttf 的字体文件包
因为有些浏览器不支持这种字体的格式显示 所以我们需要对字体格式转换
如果不进行转换字体格式,有些浏览器会无法显示自己设置的喜欢的字体 如果你毫无技术不会转换字体格式不要怕,这里提供一个免费快捷的字体转换网站

你只需要转换.ttf 文件为 eot,woff,woff2,svg,tff 以上格式随便一种 如下图,我已经用红色框框给你标记,按图操作即可

WordPress给你的博客网站换个漂亮的字体2-夕子小屋

网站调用字体

把你转换好的 5 个字体文件放在自己网站随便那个文件夹内,只需要记住地址就行

我放在自己的根目录下的-案例:https://xizii.com/WebFont.woff2

如果是 WordPress 子比主题的话直接把下面的 CSS 代码放在自定义 css 样式中

/*全站字体美化开始*/
@font-face{
font-family: 'moe';
src:  url('https://xizii.com/WebFont.ttf');
src:  url('https://xizii.com/WebFont.otf');
src:  url('https://xizii.com/WebFont.dfont');
src:  url('https://xizii.com/WebFont.rot');
src:  url('https://xizii.com/WebFont.svg');
src:  url('https://xizii.com/WebFont.woff');
src:  url('https://xizii.com/WebFont.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;
    }
  }
/*全站字体美化开始*/
THE END
喜欢就支持一下吧
点赞30 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码

    暂无评论内容