折腾一下主题样式

Administrator

喏，现在这个站点是不是看着更顺眼了？

这次主要调整了几处字体设置：

  • a元素标题（注意不是h1元素）：思源宋体 我又换成华英明朝（字重为normal）了，在下文提到的ZSFT字体自由网也可以搜到，注意文中的示例代码还是思源宋体

  • .index-content 区域：JetBrains Mono（沿用主题默认的等宽字体）

  • body 正文：更纱黑体，比微软雅黑看着顺眼点

具体实现代码如下：

@import url("data:text/css,%40font-face%7Bfont-family%3A%22ZSFT-hk%22%3Bsrc%3Aurl(%22https%3A%2F%2Ffontsapi.zeoseven.com%2Fhk%2Fmain.woff2%22)%20format(%22woff2%22)%3Bfont-style%3Anormal%3Bfont-weight%3A100%20900%3Bfont-display%3Aswap%3B%7D");
@import url("https://fontsapi.zeoseven.com/285/main/result.css");
@import url("https://fontsapi.zeoseven.com/161/main/result.css");

.index-content {
    font-family: "JetBrains Mono", monospace;
}

a {
    font-family: "Noto Serif CJK", serif;
    font-weight: 650;
}

body {
    font-family: "Sarasa Gothic SC", sans-serif;
    font-weight: normal;
    font-size: 16.5px;
    letter-spacing: 0.025em;
}

注意：这么修改之后，主题右上角的切换像素字体功能就不生效了

字体来自字体自由项目，当然也可以用中文网字计划的免费资源，两者都很好用。找到喜欢的字体之后自定义即可

顺便补充一下，怎么在手机端隐藏菜单栏：

@media (max-width: 768px) {
  ul {
    display: none !important;
  }
}

更新：再补充两个元素

:root {
    --list-theme-marker: "·"; /*修改无序列表前面的符号，可以修改成任意符号*/
    --lig-theme-font: common-ligatures; /*开启字体的连字功能*/
}

评论