Handsome主题字体修改字体教程

首先我们打开相关主题目录下/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

文章原作者 天度视界,转载需注明原出处.