天度视界

Handsome主题字体修改字体教程

好久没管过自己的博客了,百度收录都掉完了QAQ,只不过最近打算回来重新做,这次应该会认真那么一丢丢ORZ。
大致情况就是给博客换了Handsome主题,价格55感觉是非常值得的(购买链接可以看底部版权栏有作者的博客),还有作者的售后群,这次就是有用户在售后群讨论博客字体的问题,我大致看了下代码经测试该方法有效。
首先我们打开相关主题目录下/assets/css/文件夹找到font.css,打开该文档内容如下:

@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 300;
  src: local('Source Sans Pro Light'), local('SourceSansPro-Light'), url('../fonts/sourcesanspro/sourcesanspro-light.woff') format('woff');
}
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  src: local('Source Sans Pro'), local('SourceSansPro-Regular'), url('../fonts/sourcesanspro/sourcesanspro.woff') format('woff');
}
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 700;
  src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url('../fonts/sourcesanspro/sourcesanspro-bold.woff') format('woff');
}

通过学习以上代码我们可以了解到主题的相关字体文件存在于主题目录下的/fonts目录,同理,我们将自己的字体文件上传到该目录下,同时在font.css文件末尾添加:

@font-face {
  font-family: '自己的字体名,可自定义,建议纯英文';
  font-style: normal;
  src: url('../fonts/自己刚才上传的字体文件名') format('自己的字体类型建议woff或woff2,如果不是就用转换工具转换一下');

添加完成之后保存并更新css文件,然后在到后台的主题设置->开发者设置->自定义CSS中添加:

body{font-family: '刚才在font.css文件中定义的字体名';}

这样刷新页面应该就可以看到全局的字体替换效果,当然播放器的字体还需要在handsome.min.css中修改一下播放器的字体设置,大致方法是打开该文件搜索

font-family:Arial,Helvetica,sans-serif;

将其修改为

font-family: '刚才在font.css文件中定义的字体名';

再保存并更新css文件即可。

以上就是handsome主题修改全局字体的相关教程,其实其他任何主题修改字体都是类似的操作,如果没有后台自定义CSS设置和font.css也可以在主题的header文件中找到</head>标签,并在此标签之前添加<style></style>自定义样式标签,标签内容可以参考上文我们添加在font.css和后台自定义css的内容。
附上几个在线字体转换网站 >Convertio

当前页面是本站的「Google AMP」版。查看和发表评论请点击:完整版 »