排版
目录
字体栈
默认情况下,Just the Docs 使用原生系统基于 sans-serif 字体的字体栈:
system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz
对于等宽字体排版,例如代码片段或者 <pre>
元素,Just the Docs 使用基于等款字体的原生字体栈:
"SFMono-Regular", Menlo, Consolas, Monospace
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz
自适应排版比例
Just the Docs 使用一个依赖视口变化的自适应排版比例。
选择器 | 小屏幕尺寸 font-size | 大屏幕尺寸 font-size |
---|---|---|
h1 , .text-alpha | 32px | 36px |
h2 , .text-beta | 18px | 24px |
h3 , .text-gamma | 16px | 18px |
h4 , .text-delta | 14px | 16px |
h5 , .text-epsilon | 16px | 18px |
h6 , .text-zeta | 18px | 24px |
body | 14px | 16px |
标题
标题渲染如:
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6
Body 文本
默认主体文本渲染如:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
行内元素
Text can be bold, italic, or strikethrough.
Text can be **bold**, _italic_, or ~~strikethrough~~.
[Link to another page](another-page).
排版工具
有一些特定的排版 CSS 类可覆盖默认字体型号、字体粗细、行高和首字母大写。