字体字号

category
tags
type
status
slug
date
password
Last edited time
Apr 23, 2024 11:07 AM
summary
icon
💡
在4.4.3及以前的版本中,字体只能通过修改blog.config.js修改,在4.4.4以后得新版本可以用 NOTION_CONFIG配置。 具体配置方式请参阅文档底部的,NOTION_CONFIG 修改部分。
notion image
 

默认字体

系统默认是无衬线字体,您可以在blog.config.js 中自定义字体 ,相关配置如下:

字体使用说明

先确定是font-sansfont-serif, 然后在对应的FONT_SANS 和FONT_SERIF 里面配置字体名。衬线字体serif适用于正式的官网等场景,非衬线则显得比较轻松,按需选取。
例如配置了font-serif ,则需要在FONT_SERIF里面配置对应字体名,
字体读取的顺序是网页中的字符,会按照字体名的顺序依次查找,如果当前字体没有找到,则尝试找下一个。依次是'Bitter'→ '"Noto Serif SC"'→'SimSun'→ '"Times New Roman"',
 
FONT_STYLE 还支持配置字体粗细, font-light 表示细的字体,不配置则是默认粗细,更多可以参考《TailwindCSS font-weight

配置说明

参数名
默认值
参数含义
FONT_STYLE
font-sans
字体是否有衬线:font-sansfont-serif
FONT_URL
[ 'https://fonts.googleapis.com/css?family=Bitter&display=swap', 'https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300&display=swap', 'https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@300&display=swap']
字体文件URL
FONT_SANS
[ '"PingFang SC"', '-apple-system', 'BlinkMacSystemFont', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"Segoe UI Emoji"', '"Segoe UI Symbol"', '"Segoe UI"', '"Noto Sans SC"', 'HarmonyOS_Regular', '"Helvetica Neue"', 'Helvetica', '"Source Han Sans SC"', 'Arial', 'sans-serif', '"Apple Color Emoji"' ],
无衬线字体名;按照英文、数字、中文、EMOJI顺序排列,越前面优先级越高。 这里如果是苹果系统,则优先使用苹果的苹方字体、冬青黑字体。 否则windows系统的微软雅黑字体。最后使用谷歌的NotoSans字体。
FONT_SERIF
FONT_SERIF: [ 'Bitter', '"Noto Serif SC"', 'SimSun', '"Times New Roman"', 'Times', 'serif', '"Segoe UI Emoji"', '"Segoe UI Symbol"', '"Apple Color Emoji"' ],
无衬线字体名;按照英文、数字、中文、EMOJI顺序排列,越前面优先级越高。
FONT_AWESOME
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css
图标库字体,默认使用 cloudflare的cdnjs。版本使用Fontawesome 6.4.0

修改示范

旧版本中使用这种改动 blog.config.js 的方式,新版本可以使用NOTION_CONFIG进行配置。按照以下配置网站将默认显示霞鹜文楷字体,标粗下划线部分是修改的内容:
💡
注意,如果字体名称中间有空格,则要用双引号包装,对比如下: 无空格的字体:’Bitter’ 有空格的字体: '"LXGW WenKai"'

NOTION_CONFIG修改字体

  • 直接添加一个 FONT_URL 配置即可覆盖,便于自行配置web字体的路径。

字号修改

想要调整网页的字体大小怎么做?两种方案,一是通过css手动指定某个元素的字号,二是通过调整tailwindCSS的配置,整体调整不同字体的大小;
  • 方法一,调整个例
    • 在notion-config的自定义样式配置中,或者custom.css中直接指定某个元素的字体,示例:
      效果如下:
      notion image
  • 文章字体
    • 如果只想调整文章正文的字体,可以通过添加css实现 , 默认字体是1rem
      只会影响正文部分
      notion image
  • 方法二,项目底层(高级用法请小心尝试)
    • 在tailwind.config.js 中添加如下配置,其中base是默认字号,其它则是项目中有用到的更大或更小字号。这种方案其实不做推荐,因为整体字号要适配主题的样式,任意调整会导致样式不协调。
      1. 在主题的BaseLayout中设置全局默认字体text-base,例如/theme/heo/index.js → <LayoutBase>中:
        1. 修改 tailwind.config.js
          1. notion image
            代码内容,如果把base调整为1.5rem,则整体字号会大一些:
     
    菜单管理-二级菜单图标字库
    • Twikoo
    • Giscus
    • Cusdis
    ✨ 更新日志
    🚀 安装部署
    ✒ 写作指引
    🛠 站点配置
    📊 网站统计
    ⭐ 主题配置
    📩 评论插件
    🧷 外部插件
    🔊 站点订阅
    ⌨ 开发指引
    👨‍👦‍👦 联系方式