Stellar 主题优化

字体

因为该频道的定位是文章记录，所以文本在显示时易于阅读，是首先要考虑的。

由于经常使用微信读书 APP，去阅读文字，而当时的选择恰恰是霞鹜文楷，用此字体一年有余，故此频道也继承而来。

本地字体引用

后来注意到作者 xaoxuu 提醒

但是我个人并不推荐引用本地字体，相比于英文字体，中文字体囊括了众多的字符，这也无法避免地导致字体文件体积的增加，拿 Noto Serif SC 来说，单个 ttf 文件就有 9mb 之大，这对于您的站点而言加载速度可想而知。

遂放弃本地字体引用

参考：利用 [霞鹜文楷] 美化网站字体

MyBlog\themes\stellar\_config.yml

根据优先级，使用 LXGW WenKai Screen 字体作为文本的主要字体。

# CSS 中写入
  font-family:
    body: '"LXGW WenKai Screen", sans-serif, "system-ui", "Microsoft Yahei", "Segoe UI", -apple-system, Roboto, Ubuntu, "Helvetica Neue", Arial, "WenQuanYi Micro Hei", sans-serif'
    
# 
inject:
  head:
    - <link rel="stylesheet" href="https://cdn.staticfile.org/lxgw-wenkai-screen-webfont/1.6.0/lxgwwenkaiscreen.css" media="print" onload="this.media='all'">
  script:

PS：注意缩进，不然无法hexo g会报错

顶部 tab 栏

MyBlog\themes\stellar\_config.yml

nav_tabs:  # 近期发布 分类 标签 专栏 归档 and ...
  # '朋友文章': /friends/rss/
    '安全资讯': /cybernews/index.html
    '留言板': /comments/index.html

侧边栏配置

title: 网站名称
avatar: 头像

logo:
  subtitle: '' # '文字1 | 文字2' (鼠标放上去会切换到文字2)

……

Stellar 主题优化

本文采用署名-非商业性使用-相同方式共享 4.0 国际许可协议，转载请注明出处。

Stellar 主题优化

字体

顶部 tab 栏

侧边栏配置

评论