Browse Source

📝 improve document images

pull/13254/head
afc163 6 years ago
parent
commit
97bf3a157a
No known key found for this signature in database GPG Key ID: 5F00908D72002306
  1. 10
      docs/spec/font.en-US.md
  2. 18
      docs/spec/font.zh-CN.md

10
docs/spec/font.en-US.md

@ -36,23 +36,21 @@ In addition, in a lot of applications, numbers often need to be displayed vertic
We have updated Ant Design's base font size from the original 12 to 14 to ensure the best user reading efficiency on most common monitors based on display screen reading distance (50 cm) and optimal reading angle (0.3).
<div>
<img src="https://gw.alipayobjects.com/zos/rmsportal/yriUFbqOPtVniYYiikfb.png" />
<div style="text-align:center;margin:40px 0;">
<img width="600" src="https://gw.alipayobjects.com/zos/rmsportal/yriUFbqOPtVniYYiikfb.png">
</div>
## Font Scale & Line Height
The font scale and line height determine the beauty of the dynamics and order of a font system. Font scale refers to a series of font with different sizes. Line height can be understood as an invisible box wrapped outside the font.
<div>
<img src="https://gw.alipayobjects.com/zos/rmsportal/xpykKKFJQorFJltdXkie.png" />
<div style="text-align:center;margin:40px 0;">
<img width="600" src="https://gw.alipayobjects.com/zos/rmsportal/xpykKKFJQorFJltdXkie.png">
</div>
Ant Design was inspired by the pentatonic scale and natural law to define 10 different font sizes and corresponding line heights.
<div>
<img src="https://gw.alipayobjects.com/zos/rmsportal/iFjgfIBExksqCqGMwUlw.png" />
</div>
In Ant Design's visual system, our recommended base font size is 14, and its corresponding line height is 22. The choice of the rest of the font scale can be freely defined according to the specific circumstances. It is recommended that in a design system (except for display pages), the choice of font scale should be controlled within 3 to 5 types, and the principle of restraint should be maintained.

18
docs/spec/font.zh-CN.md

@ -36,23 +36,21 @@ font-family: "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", "Pi
我们基于电脑显示器阅读距离(50 cm)以及最佳阅读角度(0.3)对 Ant Design 的主字体进行了一次升级,从原先的 12 上升至 14,以保证在多数常用显示器上的用户阅读效率最佳。
<div>
<img src="https://gw.alipayobjects.com/zos/rmsportal/yriUFbqOPtVniYYiikfb.png" />
<div style="text-align:center;margin:40px 0;">
<img width="600" src="https://gw.alipayobjects.com/zos/rmsportal/yriUFbqOPtVniYYiikfb.png">
</div>
## 字阶与行高
字阶和行高决定着一套字体系统的动态与秩序之美。字阶是指一系列有规律的不同尺寸的字体。行高可以理解为一个包裹在字体外面的无形的盒子。
<div>
<img src="https://gw.alipayobjects.com/zos/rmsportal/xpykKKFJQorFJltdXkie.png" />
<div style="text-align:center;margin:40px 0;">
<img width="600" src="https://gw.alipayobjects.com/zos/rmsportal/xpykKKFJQorFJltdXkie.png">
</div>
Ant Design 受到 5 音阶以及自然律的启发定义了 10 个不同尺寸的字体以及与之相对应的行高。
<div>
<img src="https://gw.alipayobjects.com/zos/rmsportal/iFjgfIBExksqCqGMwUlw.png" />
</div>
<img src="https://gw.alipayobjects.com/zos/rmsportal/iFjgfIBExksqCqGMwUlw.png">
在 Ant Design 的视觉体系中,我们建议的主要字体为 14,与之对应的行高为 22。其余的字阶的选择可根据具体情况进行自由的定义。建议在一个系统设计中(展示型页面除外),字阶的选择尽量控制在 3-5 种之间,保持克制的原则。
@ -80,11 +78,9 @@ Ant Design 受到 5 音阶以及自然律的启发定义了 10 个不同尺寸
## 字体颜色
文本颜色如果和背景颜色太接近就会难以阅读。考虑到无障碍设计的需求,我们参考了 WCAG 的标准,将正文文本、标题和背景色之间保持在了 7:1 以上的 AAA 级对比度。
<img class="preview-img" align="right" alt="字体颜色" src="https://gw.alipayobjects.com/zos/rmsportal/jPbEabWakVQHosHxhQPR.png">
<div>
<img src="https://gw.alipayobjects.com/zos/rmsportal/jPbEabWakVQHosHxhQPR.png" />
</div>
文本颜色如果和背景颜色太接近就会难以阅读。考虑到无障碍设计的需求,我们参考了 WCAG 的标准,将正文文本、标题和背景色之间保持在了 7:1 以上的 AAA 级对比度。
## 建议

Loading…
Cancel
Save