hexo(Next主题)修改文字大小

在hexo搭建完成后，使用next主题，发现有些字体过大，比如标题下面提示文章发表时间、分类、标签等字体。以下提出我的修改方式（版本hexo：3.9.0、next：7.4.1）。

默认建好之后，如下图所示，我对框中的字体大小不满意。

首先想到要去主题配置文件_config.yml查找Font以便于修改字体大小。通过搜寻，可以看到以下的结果：

font:# Use custom fonts families or not.# Depended options: `external` and `family`.enable: false# Uri of fonts host, e.g. //fonts.googleapis.com (Default).host:# Font options:# `external: true` will load this font family from `host` above.# `family: Times New Roman`. Without any quotes.# `size: x.x`. Use `em` as unit. Default: 1 (16px)# Global font settings used for all elements inside <body>.global:external: truefamily: Latosize:# Font settings for site title (.site-title).title:external: truefamily:size: # Font settings for headlines (<h1> to <h6>).headings:external: truefamily:size: # Font settings for posts (.post-body).posts:external: truefamily:# Font settings for <code> and code blocks.codes:external: truefamily:

可以看出只有全局、题目、多级标题、文章、代码的字体设置，并没有细致到我们需要的位置，于是我思考一定有一个地方设置了多种不同情况下所用到字体的大小。通过各方面的搜索，发现在themes\next\source\css\_variables下的base.styl中有这么一块：

// Font size
$font-size-base           = 1em;
$font-size-base           = unit(hexo-config('font.global.size'), em) if hexo-config('font.global.size') is a 'unit';
$font-size-smallest       = .75em;
$font-size-smaller        = .8125em;
$font-size-small          = .875em;
$font-size-medium         = 1em;
$font-size-large          = 1.125em;
$font-size-larger         = 1.25em;
$font-size-largest        = 1.375em;

看到了和我猜想一样的设置了不同情况下的字体的大小，其中font-size-smallest控制的就是红框中的字体大小，我进行了如下修改：

$font-size-smallest       = .65em;
$font-size-smaller        = .75em;
$font-size-small          = .8em;

结果如下：

在页尾处的字体大小由$font-size-small控制，修改后结果如下：

至此就完成了文字大小的修改。

hexo(Next主题)修改文字大小相关推荐

iOS 修改文字大小以适配lable高度宽度
iOS 修改文字大小以适配lable高度宽度在开发中,我们也许会遇到根据文字多少动态修改lable的高度,但也有lable高度和宽度是固定的,这个时候如果想让文字显示完全,就必须修改文字字体大小.动 ...
微信开发修改button里的字体大小_在微信小程序中如何修改文字大小
这篇文章主要介绍了微信小程序实现点击按钮修改文字大小功能,涉及微信小程序事件绑定及setData动态修改Page页面data数据,进而控制页面元素属性动态改变的相关操作技巧,需要的朋友可以参考下本文 ...
迅捷CAD编辑器如何修改文字大小
在我们使用CAD编辑器进行制图的时候,很多的时候多会用到文字.比如标注,单行文字,多行文字等.你会发现有的时候文字和整个图的比例大小十分的不和谐.我们应该怎么修改文字的大小呢.下面我将为大家介绍一种办 ...
doc python 字体颜色,Python docx修改文字大小字体类型 Python-docx 实现整体修改或者部分修改文字的大小和字体类型...
想了解Python-docx 实现整体修改或者部分修改文字的大小和字体类型的相关内容吗,Leeoo_lyq在本文为您仔细讲解Python docx修改文字大小字体类型的相关知识和一些Code实例,欢迎 ...
Adobe Acrobat怎么修改文字大小
Adobe Acrobat中文本框属性中没有调整文本框内字体大小的选项,在网上查找,终于找到调出此功能的方法: 1.用 Ctrl+E (Mac用command+E)调出文本框属性工具条,双击进入文本框 ...
怎么用PHP修改文字大小,如何利用PHP和CSS改变网页文字大小
列表B // start session // import selected size into session session_start(); $_SESSION['textsize'] = $ ...
hexo stellar主题修改字体
参考发布者的指南: 探索个性化配置-字体-外部字体在Google font里查看需要的字体 Google font 使用Noto Serif SC生成链接找到想要用的字体: 点击进入下拉选择右边 ...
【微信小程序教程】点击按钮修改文字大小
1.效果展示 2.关键代码 wxml文件 js文件 3.源代码获取方式百度云链接:http://pan.baidu.com/s/1bI2xQY
pr13.0 2019 视频添加静态文字，修改字体类型，修改字体大小
pr13.0 2019 视频添加静态文字简单使用工具即可方便添加静态文字左上角的效果控件可以修改文字类型和大小修改文字类型点击效果控件中的源文字修改文字大小法一:通过效果控件改变法二:通 ...
speedoffice（Word）如何修改字体大小呢？
我们有时需要根据实际的需求修改默认的字体大小,那么怎么修改文字大小呢?看看小编是怎么操作的吧首先,选中需要修改字体大小的文字,如图: 方法1在主页菜单里面点击"增加字体大小"或者 ...

hexo(Next主题)修改文字大小

hexo(Next主题)修改文字大小相关推荐

最新文章

热门文章