个人博客开发规划
type
Post
status
Draft
summary
slug
date
tags
category
password
icon
URL
Property
Oct 30, 2024 01:43 AM
归档页面样式
文章卡片样式
前期复现案例（简单）：https://pepcn.com/
字体系列
- 衬线字体（Serif Fonts）：衬线字体特点是在字母的笔画末端有额外的装饰性小横线。这种字体通常被视为经典、正式和专业，适合用于正文内容和印刷材料。
- 英文中经典的衬线字体：Times New Roman、Georgia、Baskerville 等；
- 中文中经典的衬线字体：宋体，仿宋体等。
- 无衬线字体（Sans-serif Fonts）：无衬线字体没有装饰性的小横线，字母形状更加简洁。无衬线字体通常被认为现代、简洁和易读，适合用于标题、标语和数字化媒体。
- 英文中经典的无衬线字体：Arial、Helvetica、Verdana 等；
- 中文中经典的无衬线字体：微软雅黑、黑体等。
- 等宽字体（Monospaced Fonts）：等宽字体中的每个字符都具有相同的固定宽度。等宽字体适合在需要对齐文本或展示代码的情况下使用。
- 英文中经典的等宽字体：Courier New、Consolas、Monaco 等；
- 对于中文，每个汉字都是等宽的。
- 手写字体（Script Fonts）：手写字体模仿手写的风格，给人一种个性化和艺术化的感觉。手写字体常用于标题、logo、徽标和需要突出特定风格的设计。
- 英文中经典的手写体：Brush Script、Lobster、Pacifico 等；
- 行书系列、草书系列的字体等（书法行楷、书法楷书、书法行书等）。
- 装饰性字体（Decorative Fonts）：装饰性字体独特而具有艺术性，通过特殊的装饰元素和艺术效果来吸引注意力。装饰性字体通常在特定的设计或品牌要求下使用，而不适合作为主要的可读文本字体。
- 英文中经典的装饰性字体：Copperplate Gothic、Chiller、Jokerman 等；
- 中文中常用的装饰性字体：花草篆书、丹宝体等。
中文系统，默认的字体为宋体，见的太多导致审美疲劳，所以衬线字体比较适合打印文字以及正规文档中使用，通常不太适合使用在网页中。
字体格式
- 单位：
- 单位 px：绝对大小，
- 单位 em：相对大小（相对浏览器默认（默认 16px）大小的倍数）
- 尽量用偶数大小，避免锯齿问题
- 字体大小
- 正文：1em; /* 16px */, 1.125em; /* 18px */
- 一级标题
- 二级标题
- 三级标题
- 行高
- 1.5rem; /* 24px */
- 1.75rem; /* 28px */
- 2rem; /* 32px */
- 字重：字体粗细
- 正文：400 / 500
- 颜色：避免特殊颜色，简洁
- 样式：是否斜体
选择字体
浏览器解析字体的过程：当浏览器加载 CSS 后，会解析有关字体的样式，然后在操作系统中查找字体，如果有则皆大欢喜；如果没有则通常使用当前系统的默认字体来渲染。
解决问题的方法：
- 使用最通用的字体：总有一些比较经典老牌的字体共同存在于各个系统中。例如无衬线的 Arial 字体
- 设置一个字体族：从左往右，从前往后依次查找字体；如果有则用，如果没有则再找下一个。最后如果都没有则使用系统默认的。
Google Fonts API引用：
建议字体：（建议参考知乎）
-apple-system
- 300，400
- 16px，17px，18px
- 26px，28px，30px，32px
Optimistic Text（react 官网）
400,17px,28px,#23272f
色彩
- 背景色：
- 亮钢蓝：247,249,250；F7F9FA
- 白烟色：248,248,248；F8F8F8
- 前景色：
- 纯白色：255,255,255；FFFFFF
- 字体颜色：
- 黑色：18,18,18；121212（linmi）
- 纯黑色：0,0,0；000000（安子璠）
- 暗岩灰：25,27,31；191B1F（知乎）
- 铁灰色：55,53,48；373530（Notion）
Notion API
获取页面
uuid报错
'{"object":"error","status":400,"code":"validation_error","message":"path failed validation: path.block_id should be a valid uuid, instead was
\\\\"----\\\\".","request_id":"a47eaa18-2af3-4cdb-8916-c98dacb4a8c6"}'import { idToUuid } from 'notion-utils’ 转换无效
获取 Block
文章页大图：参考虎嗅网