如何给WordPress博客网站换个漂亮的字体

前言

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

教程开始

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

开源字体

2.转换字体包格式

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

字体格式转换网站1字体格式转换网站2字体格式转换网站3

再用其他俩个网站生成dfont字体格式即可。

3.网站调用字体

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

我放在自己的根目录下的-案例:https://www.pengqi.club/plzt.ttf(推荐放在云储存)

再或者你可以把7个字体文件上传到oss文件或者是UNiCloud的免费云储存中,这样可以加快字体加载

最后如果是 WordPress 子比主题的话直接把下面的 css 代码放在自定义 css 样式中(下方代码是本站现在用的字体)

/*全站字体美化*/
/*by 淇云博客-www.pengqi.club*/
@font-face{
font-family: 'pq';
src:  url('https://vkceyugu.cdn.bspapp.com/VKCEYUGU-2795843d-b24e-4ca8-8f8b-7449c17ce44f/e02dacd0-17db-484a-9a2c-df33245a3927.ttf');
src:  url('https://vkceyugu.cdn.bspapp.com/VKCEYUGU-2795843d-b24e-4ca8-8f8b-7449c17ce44f/b96a8b28-a4b4-484d-8ce1-33d0a6aa99c5.otf');
src:  url('https://vkceyugu.cdn.bspapp.com/VKCEYUGU-2795843d-b24e-4ca8-8f8b-7449c17ce44f/0e3d69cc-c16f-4df0-84d6-662083bb34b3.dfont');
src:  url('https://vkceyugu.cdn.bspapp.com/VKCEYUGU-2795843d-b24e-4ca8-8f8b-7449c17ce44f/27e223b6-9fb0-43d9-bdb9-96df148b9734.eot');
src:  url('https://vkceyugu.cdn.bspapp.com/VKCEYUGU-2795843d-b24e-4ca8-8f8b-7449c17ce44f/722ea0da-4438-4b3b-b46c-2d6aa2c5f98d.svg');
src:  url('https://vkceyugu.cdn.bspapp.com/VKCEYUGU-2795843d-b24e-4ca8-8f8b-7449c17ce44f/a4de04f7-6942-4546-a5b9-374fda24872a.woff');
src:  url('https://vkceyugu.cdn.bspapp.com/VKCEYUGU-2795843d-b24e-4ca8-8f8b-7449c17ce44f/2dcd2826-37ee-4d4e-b9f6-e0356db3f854.woff2');
}
body{
font-family:'pq';
}
.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;
    }
  }
/*全站字体美化结束*/
/*by 淇云博客-www.pengqi.club*/

注:非常重要)font-faplzt 是自定义字体名称(自己修改),url 这是字体文件的地址(自己修改),*这是全局显示。

将以上代码添加你的主题文件 css 样式即可。子比主题路径:后台主题设置—>自定义代码—>自定义 CSS 样式代码把下面的代码添加到里面 然后刷新页面即可

另外再分享本站目前使用的字体供大家使用

下载地址:如何给WordPress博客网站换个漂亮的字体-淇云博客前言 大多数站长在使用博客初期,喜欢魔改美化自己的网站,博客的建设主要方便访客高质量的阅读 所以对字体的选择非常重要,本期博主给大家出一期如果给自己的博客资源网自定义自己喜欢的字体 教程开始 1.首先下载自己喜欢的字体包 在这里我给大家推荐一款免费的字体下载站 开源字体 2.转换字体包格式 当我们下载字体之后会有一个压缩包 里面会有一个.ttf 的字体文件包因为有些浏览器不支持这种字体的格式显示https://www.pengqi.club/1692.html

  • 0
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

淇云博客

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值