Zensical 的小技巧
Mermaid | PyMdown Extensions | Icons | Lucide
键盘按键格式§
使用方法
Tab
Ctrl+Alt+Del
警告框§
Tip
tip
Info
info
Success
success
Note
note
Tip
Info
Success
Question
Note
Abstract
Warning
Failure
Danger
Bug
Quote
Example
通用§
```py { title="代码块的所有配置" .yaml .no-copy .no-select hl_lines="2 3" linenums="0" }
def bubble_sort(items): # (1)!
for i in range(len(items)):
for j in range(len(items) - 1 - i):
if items[j] > items[j + 1]:
items[j], items[j + 1] = items[j + 1], items[j]
```
1. 这是注释内容, 注释是按照对应语言来的
`#!python range()` / `range()`
def bubble_sort(items): # (1)!
for i in range(len(items)):
for j in range(len(items) - 1 - i):
if items[j] > items[j + 1]:
items[j], items[j + 1] = items[j + 1], items[j]
- 这是注释内容, 注释是按照对应语言来的
range() / range()
使用 MiSans 字体§
基础使用§
字体选择与下载§
首先去 MiSans 官网 下载字体, 有很多选项, 我选择的是第一个 MiSans, 下载解压之后有很多目录, 分别代表不同的格式, 选一种来用就行了, 我用的是 woff2。
| 目录名称 | 格式与特征 |
|---|---|
| ttf | 经典桌面字体格式, 兼容性最强, 几乎所有系统都能直接用, 适合本地安装, 但文件大、没压缩、网页加载慢, 不推荐做网页主字体。 |
| otf | TTF 的升级版, 支持更多高级排版特性, 如连字、SS01、上标、分式等, 质量更高, macOS 表现优秀, 但体积同样大、网页效率低, 主要用于设计和印刷。 |
| woff | 网页专用格式, 对 TTF/OTF 进行 zlib 压缩, 体积小 30–50%、保留所有特性、兼容 IE9+, 但压缩不如 WOFF2, 现在多做 fallback。 |
| woff2 | WOFF 的升级版, 用 Brotli 压缩, 体积再小 20–30%、加载最快、特性完整、现代浏览器全支持, 是当前网页字体的首选。 |
| 可变字体 | 现代技术, 一个文件就能控制所有字重、宽度、斜体等变化, 体积最小、加载高效、过渡平滑, 适合字重多的字体族, 是简化配置的好选择。 |
| .DS_Store | 这不是字体文件, 是 macOS 系统自动生成的隐藏文件（桌面设置缓存）, 完全无用。直接忽略或删除它即可, 不会影响字体使用。 |
装载与配置§
-
创建
docs/assets/fonts这个目录, 将MiSans-*.woff2文件放进去。 -
在自定义 CSS 文件中添加规则, 让自定义字体覆盖项目字体。
别忘了在项目配置文件中添加自定义 CSS 文件 -
然后在自定义 CSS 文件中设置将字体用于特定元素, 例如仅应用于标题、整个网站或者用作常规字体或代码字体。我配置了常规字体, 因为我觉得代码字体用上不好看。
使用高级特性§
MiSans 包含多种 OpenType 高级排版功能, 也就是可以让字体排版更加精致, 符合实际设计、开发需求, 每个字体功能都有对应的标签, 用于标记功能效果。MiSans 包含 15 种特性以满足不同业务对字体上的不同需求, 提供可选择性。
-
局部开启(推荐), 用内联样式或者自定义类使用, 这样也不会影响其他正常文本, 使用方法如下：
-
未开启
123,435,00
-
已开启
123,435,400
这个特征是数字专用标点, 除了这个还有其他的特征:
CSS 底层配置 特征效果 未启用 已启用 'ss01'数字专用标点 :1,234.5 :1,234.5 'ss02'单位改为上标 96% 96℃ 96% 96℃ 'ss03'单位改为下标 96% 96℃ 96% 96℃ 'ss04'数字等高汉字 4月21日 4月21日 'ss05'将大写的 M
改为 小米 图标M M 'ss06'将大写的 M
改为 MIUI 图标M M 'ss07'西文式标点 “Hi, it’s me” “Hi, it’s me” 'ss08'拨号专用符号 *0# *0# 'SS09'小字面数字 359264 359264 'case'英文括号与
大写字母等高{[(ABC)]} {[(ABC)]} 'frac'分数 5/9 5/9 'sups'数字/小写字母
全部为上标12ABab 12ABab 'tnum'1数字等宽 1,234,567,890 1,234,567,890 -
-
全局开启,
font-feature-settings属性提供了对 OpenType 字体特性的底层精细控制, 它的设计初衷是让开发者能够访问那些不常用但在特定场景下非常需要的字体特性, 所以在全局状态下使用这个属性浏览器不一定会渲染。所以这是我想到一个强制加载的方法, 但是比较麻烦。-
配置前
26年4月21日 15:23
-
配置后
26年4月21日 15:23
-
使用 Base64 编码§
使用 Base642 编码 PNG、JPEG 和 GIF 图像能让整个页面完全自包含这类文件, 不需要额外携带图像文件夹。但是会让 HTML 文件体积增加约 33%~37%, 其次图像无法被浏览器缓存, 每次访问都会重新渲染。
如果仅希望分享文档内容, 但不额外提供图像文件, Base64 就能帮到你。但不推荐在普通的网站场景中使用。base_path 参数指示用于解析相对链接的基本路径的字符串。默认为 '.', 这个不管 images 在哪里都不用更改