案前独忆灯明灭

怕他什么整理无穷, 进一寸有一寸的欢喜

hexo修改主题字号

使用hexo的时候, 主题默认的字号可能与我们标题或者副标题的长度不太契合, 导致标题被强行换行, 破坏页面整体的和谐感. 这时, 可以修改主题的设置, 来微调字体.

首先找到主题标题风格所在的设置文件, 对于 media 主题, 其配置文件为 .\themes\meilidu\source\css\header.styl, 其他主题也基本相同.

其字体大小的单位是 rem, 用过 LaTeX 的同学们应该很熟悉了, 一个修改手机版网页的标题字号的例子如下:

@media only screen and (max-width: breakMobile)
    .header__title
        font-size: 3rem    // 主标题字号
    .header__subtitle
        font-size: 1.5rem

.header__title a
    color: headerColor

.header__title a:hover
    link-underline(rgba(0,0,0,0), headerColor, headerColor)

.header__subtitle
    margin: 0
    padding: 0
    font-size: 1.2rem    // 副标题字号
    text-align: center
    color: headerColor
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5)
    font-weight: 300
⬅️ Go back