忆点

「潍坊网站建设」Handsome主题字体修改
TYPECHO主题HANDSOME自定义字体样式修改教程。
扫描右侧二维码阅读全文
19
2019/01

「潍坊网站建设」Handsome主题字体修改

「潍坊网站建设」Handsome主题字体修改-忆点技术博客

TYPECHO主题HANDSOME自定义字体样式修改教程。


博主用的博客是typecho,主题是用的handsome主题,今天在主题售后群里看到有人问这个主题后台设置字体大小设置后不生效,当时博主也遇到了这个问题,不过没太在意,今天又有人问了就想起来了,顺便解决了一下。

文章字体显示清晰也会对百度抓取加分项,所以博主小小的重视了一下。下面说下如何操作使文章字体变大。

看文章源代码我们知道文章是用的p标签,为了使其余地方不发生错乱,我们只定义p标签就好了,在handsome后台设置的开发者设置中有个自定义css,把博主分享的这段代码填入保存就OK了!

hx {   //此处为给什么标签下定义,h表示标题,x表示1~6,注意使用什么标题几就定义标题几;
  font-family: "Microsoft YaHei"; //定义P标签字体为微软雅黑;
  font-size: 18px;  //定义P标签字体大小;
  font-weight:bolder; //定义字体加粗,blod为加粗,bloder为特粗;
}
p {    //此处为文章字体定义标签;
  font-family: "Microsoft YaHei";
  font-size: 18px; 
}       //以上标签需要什么就复制什么,双斜杠后面为注释,删掉即可!

以上就是文章和标题的字体大小定义的css代码,解决完这个问题后,又有人问,想让字体发光。当时博主就懵了,发光是什么鬼???!!!

然后博主就是百度了一下,发现还真有,于是把代码拿过来修改一下子,适应handsome使用,下面给大家放出代码:

p {
   font-family: "Microsoft YaHei"; //文字字体;
    color: #000000;  //字体颜色;
    font-size: 1.5em;  //字体大小,注意这里用的是em为单位,1em=18px;
    -webkit-transition: all 1.5s ease;
            transition: all 1.5s ease;
}
p:hover {
    color: #fff;
    -webkit-animation: Glow 1.5s ease infinite alternate;
            animation: Glow 1.5s ease infinite alternate;

}
@-webkit-keyframes Glow {
    from {
        text-shadow: 0 0 10px #fff,
                     0 0 20px #fff,
                     0 0 30px #fff,
                     0 0 40px #00a67c,
                     0 0 70px #00a67c,
                     0 0 80px #00a67c,
                     0 0 100px #00a67c,
                     0 0 150px #00a67c;
    }
    to {
        text-shadow: 0 0 5px #fff,
                     0 0 10px #fff,
                     0 0 15px #fff,
                     0 0 20px #00a67c,
                     0 0 35px #00a67c,
                     0 0 40px #00a67c,
                     0 0 50px #00a67c,
                     0 0 75px #00a67c;
    }
}
@keyframes Glow {
    from {
        text-shadow: 0 0 10px #fff,
                     0 0 20px #fff,
                     0 0 30px #fff,
                     0 0 40px #00a67c,
                     0 0 70px #00a67c,
                     0 0 80px #00a67c,
                     0 0 100px #00a67c,
                     0 0 150px #00a67c;
    }
    to {
        text-shadow: 0 0 5px #fff,
                     0 0 10px #fff,
                     0 0 15px #fff,
                     0 0 20px #00a67c,
                     0 0 35px #00a67c,
                     0 0 40px #00a67c,
                     0 0 50px #00a67c,
                     0 0 75px #00a67c;
    }

这个代码不会自己发光,只能当你鼠标放在上面才会发光,除注释外,其余的自行修改研究。


页面关键词:潍坊SEO,潍坊SEO外包,潍坊SEO建站

最后修改:2019 年 04 月 19 日 08 : 50 AM
如果觉得我的文章对你有用,请随意赞赏

发表评论