调整博客正文字体大小

Auth:老郭       Date:2025/03/04       Cat:网络       Word:共 527 个字符/单词       Views:27

老郭更换博客主题之后,就陆陆续续的对博客主题的细节进行了一些调整。调整基本上就是修改代码,鉴于deepseek现在的情况,老郭只能借助于grok。

首先老郭觉得博客正文的字体有些小了,看上去颇为吃力,就想把字体调大一些。由于主题没有直接定义 正文的font-size,因此正文字体大小继承自更高层的设置。那么就好办了,打开style.css文件,在900多行的位置找到以下代码:

.entry-content,
.entry-summary,
.mu_​register {
    line-height: 2.4;
    margin: 0 0 1.714285714rem;
    line-height: 1.714285714;
}

在后面添加正文font-size:

.entry-content {
    font-size: 18px; /* 调整为 18px,你可以根据需要修改 */
    font-size: 1.8rem;
}

这样,正文的字体就变大了,看着也舒服了不少。不过,正文字体大了,正文的标题又显得有些小了,有点不太协调。修改正文标题大小的方式和上面类似,在刚才添加的字体大小代码的下面继续添加:

.single-post .entry-header .entry-title {
    font-size: 26px;
    font-size: 2.6rem;
}

刷新一下页面,标题也变大了,看着就不吃力了。

老郭还发现,博客正文存在段落首行没有缩进的问题,这估计是因为wordpress是外国人编写的,没有考虑到中文需要首行缩进,那咱们就得自己解决。方法也不难,找到刚才修改正文字体大小的地方,把代码修改为:

.entry-content {
    font-size: 18px;
    font-size: 1.8rem;
    text-indent: 2em;
}

其中的2em就是首行缩进2个单位。

首行缩进实现了,但新的问题又出现了,文章里的图片也跟着一起缩进了,影响了整体的美观。没办法,继续修改,在修改正文字体大小和标题大小的两段代码之间插入以下代码:

.entry-content img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

图片终于居中展示了。这样,老郭对于Twenty Twelve 木头人修改精简版二次开发版本正文部分的修改基本上算是完成了,全部修改的代码如下:

.entry-content,
.entry-summary,
.mu_​register {
    line-height: 2.4;
    margin: 0 0 1.714285714rem;
    line-height: 1.714285714;
}
.entry-content {
    font-size: 18px;
    font-size: 1.8rem;
    text-indent: 2em;
}
.entry-content img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.single-post .entry-header .entry-title {
    font-size: 26px;
    font-size: 2.6rem;
}

老郭博客文章均为原创,本文地址 https://lgbk.cn/archives/2602.html,转载请以链接形式注明出处。

作者:

《调整博客正文字体大小》留言数:0

发表留言