前言
方法还是 F12 Mashiro大佬博客的，和大佬博客展示的一毛一样 _(:зゝ∠)_
用了 CSS自定义字体 + 大佬博客爬到的CSS ，Mashiro大佬用的字体包只有 “樱花庄的白猫” 这几个字，所以字体包只能自己百度喜欢的啦（注意版权问题哦）！
开工
- 首先要有
ttf格式的字体文件（百度免费商用字体选一个自己喜欢的即可），原始的ttf字体文件可能很大，可以到这个站点来获取字体的子集，例如我使用的字体文件就只包含博客名字 “Yoshino的小窝”与英文字母，文件大小只有40KB，既省空间又省流量。
- 准备好字体后在再这个站点里来转换为方便网页使用的格式，放在一个可以访问的服务器、oos、cdn等上，然后将能调用到字体文件夹里的
css文件的链接填写到logo字体连接
- 打开Sakura主题包中的头文件
header.php引用上面文件里的FZYouMaoZaiK-subfont.css文件
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/ameink/CDN/fonts/FZYouMaoZaiK-subfont/FZYouMaoZaiK-subfont.css" media="all">
- 修改 Sakura主题包中的头文件
header.php第103行
<span class="logolink moe-mashiro">
<a href="<?php bloginfo('url');?>">
<ruby>
<!-- <span class="site-name"><?php echo akina_option('site_name', ''); ?></span> -->
<span class="sakuraso">Yoshino</span>
<span class="no">的</span>
<span class="shironeko">小窝</span>
<rp></rp><rt class="chinese-font">Welcom</rt><rp></rp></ruby>
</a>
</span>
- 后台主题设置-自定义CSS样式 增加如下 CSS
/* logo */
.logolink a {
color: #464646;
float: left;
font-size: 20px;
font-weight: 800;
height: 56px;
line-height: 56px;
padding-left: 35px;
padding-right: 15px;
padding-top: 11px;
text-decoration-line: none
}
.logolink .sakuraso {
background-color: rgba(255, 255, 255, .5);
border-radius: 5px;
color: #464646;
height: auto;
line-height: 25px;
margin-right: 0;
padding-bottom: 0px;
padding-top: 1px;
text-size-adjust: 100%;
width: auto
}
.logolink a:hover .sakuraso {
background-color: orange;
color: #fff;
}
.logolink a:hover .shironeko,
.logolink a:hover .no,
.logolink a:hover rt {
color: orange;
}
.logolink.moe-mashiro a {
color: #464646;
float: left;
font-size: 25px;
font-weight: 800;
height: 56px;
line-height: 56px;
padding-left: 6px;
padding-right: 15px;
padding-top: 11px;
text-decoration-line: none;
}
.logolink.moe-mashiro .sakuraso,.logolink.moe-mashiro .no {
font-size: 25px;
border-radius: 9px;
padding-bottom: 2px;
padding-top: 5px;
}
.logolink.moe-mashiro .no {
font-size: 20px;
display: inline-block;
margin-left: 5px;
}
.logolink a:hover .no {
-webkit-animation: spin 1.5s linear infinite;
animation: spin 1.5s linear infinite;
}
.logolink ruby {
ruby-position: under;
-webkit-ruby-position: after;
}
.logolink ruby rt {
font-size: 10px;
letter-spacing:2px;
transform: translateY(-15px);
opacity: 0;
transiton-property: opacity;
transition-duration: 0.5s, 0.5s;
}
.logolink a:hover ruby rt {
opacity: 1
}
.moe-mashiro {
font-family: 'FZYouMaoZaiK-subfont', 'Merriweather Sans', Helvetica, Tahoma, Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft Yahei', 'WenQuanYi Micro Hei', sans-serif;;
}
展示
Comments | NOTHING