此文章為 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;
}

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

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