Hmm

Handsome主题字体修改字体教程
好久没管过自己的博客了,百度收录都掉完了QAQ,只不过最近打算回来重新做,这次应该会认真那么一丢丢ORZ。大致情况...
扫描右侧二维码阅读全文
02
2018/03

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

最后修改:2018 年 03 月 03 日 01 : 07 AM

13 条评论

  1. 周星星

    已解决,再次的thanks。

  2. 周星星

    博主,问一下,怎么更改文章内容字体大小啊,默认的是14号。现在是只能在标题后点击那个T,会改变,不过刷新一下就又变回去了。

    1. Hmm
      @周星星

      纠一下错,是:#post-content {
      font-size:200px;
      }

      1. 周星星
        @Hmm

        正在看您的这篇改文章字体的博文,尝试修改呢,有卡顿的地方的话再来贵站咨询啊!(☆ω☆)

      2. 周星星
        @Hmm

        问题已解决,谢谢啦!

    2. Hmm
      @周星星

      可以后台自定义CSS: .post-content {font-size:20px};设置大小

      1. 周星星
        @Hmm

        https://blog.awjds.cn/archives/106/ 这是不是搬运的你的文章的,而且没标明来源,偶遇到的。

        1. Hmm
          @周星星
          该评论仅登录用户及评论双方可见
          1. 周星星
            @Hmm

            博主,我觉得你对字体更改这块挺了解的。想问一下:怎么是博客的字体颜色加重,也就是让黑色加重,我觉得默认的看起来不是很舒服。

            1. Hmm
              @周星星

              是修改字体颜色还是增加字体阴影修改?

              1. 周星星
                @Hmm

                http://www.ilwwj.cn/ 就是像这个里的文章字体一样。我的andylhl.cn ,我觉得太浅了

              2. 周星星
                @Hmm

                字体的颜色,想给为这个 #000

                1. Hmm
                  @周星星

                  后台自定义CSS添加#postpage{color:#000;}即可

发表评论 取消回复