之前的使用情况#

我之前是直接在halo后台的主题主题设置那添加了一段css代码，具体位置为：halo后台>外观>主题设置>自定义>自定义CSS，改了之后确实是有效果的，但是只让文章主体的字体变大了，像标题（从一级到六级都没变）、无序列表、有序列表、引用（前面加上”>“那个）都没变，导致文章看起来特别难受，后来干脆写文章直接不用这些列表和引用。

一段时间下来的使用感受#

就这样用了一段时间后，我发现写文章不用这些列表看起来是真难受，没有层次感，内容的主次都不太容易能看出来，昨天忍不了就换了一个别的主题试试，换了几个之后发现字体都比较小，看着很累，而我的halo版本还比较低，还停留在1.6.1版本，新的主题根本用不了，旧的主题想找到一个字体和导航栏都舒服的也比较费时间（其实主要是怕找到最后一个符合预期的都没有。。。）。

导航栏想用一个标题特别多的情况时带滚动条的，可以单独滚动导航栏，之前用的主题导航栏没有单独的滚动条，长文章来回翻的时候只能滚文章主体等导航栏跟着动，有时候我一个一级标题下的二级标题就一屏了，把上面的一级标题都挤到屏幕外了，得点两三次，强迫症非常难受

于是就到网上搜了一下博客主题中文字大小的修改（想看看难度如何），发现了一篇文章，也就是上面的参考文章，感觉这个难度好像可以试试，于是就有了这篇记录。

查看方法#

根据参考文章中修改.CSS文件调整字体大小那部分的内容，我看了一下自己用的主题的字体大小，大致思路就是按谷歌浏览器的F12打开调试>选择元素模式>鼠标移动到要查看的部分>图里就有字体大小

乱找找到字体大小属性#

现在我这个是15px，比较小，我想把它调大几号，就需要知道这个属性在哪个文件的哪行代码里，我又不太懂前端部分的知识，只能是一通乱翻，发现在F12调出的界面中修改一个变量的值可以让文章字体跟着变，猜测这个就是字体大小的值，如图

根据这个属性上面的内容，在源文件中找#

这个属性对应的joe_detial_article感觉应该是关键，于是先按照参考文章的思路，将该主题源代码中的.css文件进行格式化，然后挨个源文件搜索这串代码（我是用notepad++ 打开然后挨个搜的，纯笨方法）

找到这串代码的位置#

如图

【失败】在halo主题对应位置修改#

halo的后台能修改主题文件，位置为：halo后台>外观>主题编辑

我在对应的文件对应位置，将15px改为18px，保存后，刷新浏览器，发现字体大小没变，不太懂前端的东西，应该还是哪里出现问题了。

【已解决】在halo主题的自定义部分添加代码#

忙活到最后，发现只需要在halo后台>主题设置>自定义>自定义CSS那里输入以下代码就能实现我想的效果，忙活一上午，前端的东西多少也要了解点，太痛苦了

输入的代码：

1
div {
2
    font-size: 18px;
3
}

输入后是这样的，如图

原来主题字体问题#

这回一起解决了，原来主题其实挺好看，就是字体看着难受，字体是灰色的，字体宽度还小，设置的是300，网上搜默认是400或者normal，另一个字体粗细看着舒服的主题我也用F12看了一下，根本没有设置字体宽度，就是默认值，然后我把字体宽度从300改到400，看着确实舒服不少，这波也没白忙活，只要把这个输入到主题自定义的CSS部分就解决了

font-weight：字体宽度

新问题#

大意了，以为直接写按上面那个写个div然后输入参数就行，换成这个Dream主题，用div没反应

用F12看了一下，发现我写的代码被划掉了，于是我试着按上面font-size有效的那部分写了一下，确实是好使的，它这个字体大小的单位rem我也没见过，改了个1.2，看着挺舒服

rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。

代码如下：

1
.main-content {
2
    font-size: 1.2rem;
3
    font-weight: 400;
4
    color: #000000;
5
}

主题之间还不太一样，那别的主题想改也没办法直接拿过去用了，寄#

这回没问题了，下回美化这方面不懂的地方还是先在网上找个现成的CSS抄作业比较好，多少理解点再试，不然真弄不明白怎么回事