此文章為 Typecho Handsome 主題使用

自定义字体

下载

使用 Fontmin 制作一个字体库，避免字体文件过大

  1. 导入自己的字体，输入文本，生成
  2. 将生成的目录上传

更改标题

编辑 handsome/index.php

查找 <?php $this->options->title(); ?>

将该行注释：

1
2
<!--原首页标题-->
<!--<h1 class="m-n font-thin text-black l-h"><--?php $this->options->title(); ?></h1>-->

注释原首页标题，方便还原

在下面添加：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!--首页标题字体引入-->
<link href="https://cdn.jsdelivr.net/gh/iMacyhs/[email protected]/assets/fonts/Pristina/Pristina.css" rel="stylesheet" />
<!--改首页标题-->
<h1 class="m-n font-thin text-black l-h">
<span class="Logo-fonts logolink Pristina">
<b href="https://www.schan.in">
<ruby>
<span class="Pristina">Steve's Blog</span>
<rp></rp>
<rt class="Pristina">Follow Your Heart</rt>
<rp></rp>
</ruby>
</b>
</span>
</h1>

注意更改为自己的字体和标题内容

自定义 CSS

添加至后台 设置外观—开发者设置—自定义 CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
.Pristina {
    font-family: 'Pristina';
}

.logolink .Pristina {
    border-radius: 5px;
    color: # AAAAAA;
    height: auto;
    line-height: 25px;
    margin-right: 0;
    padding-bottom: 0px;
    padding-top: 1px;
    text-size-adjust: 100%;
    width: auto;
}

.logolink ruby {
    ruby-position: under;
    -webkit-ruby-position: after;
}

.logolink ruby rt {
    font-size: 20px;
    transform: translateY(-2px);
    opacity: 0;
    transiton-property: opacity;
    transition-duration: 0.5s, 0.5s;
}

.logolink b:hover ruby rt {
    opacity: 1;
}

注意更改为自己的字体效果

参考：
自定义首页标题特效