GitHub
/
ant-design
6
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

update font docs

pull/5277/head
afc163 8 years ago
parent
f44220d91b
commit
3002ff33c4
2 changed files with 36 additions and 188 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 222
      docs/spec/font.md
  2. 2
      site/theme/static/preview-img.less

222
docs/spec/font.md
View File

@ -10,200 +10,48 @@ title:
跨平台的字体设定，力求在各个操作系统下都有最佳展示效果。
字体是界面设计中最重要的基本构成之一，用户通过文本来消化内容和完成工作，优雅的字体将大大提升用户的阅读体验及工作效率。Ant Design 的字体方案，在满足不同终端始终保持良好的阅读体验的同时，使页面的视觉层次更加清晰。使用时有以下三点需要注意：
- 合理的使用不同的字重、字号和颜色来强调界面中最重要的信息；
- 尽可能的使用单种字体，混合使用多种字体会让界面看起来零散和草率；
- 遵循 WCAG 2.0 标准，字体在使用时与背景颜色的对比值满足无障碍阅读的最低标准。
---
## 字体家族
- 中文字体族：
字体家族 css 代码如下：
<img src="https://os.alipayobjects.com/rmsportal/OKbesWXtRMCNGmO.png" width="100%">
优秀的字体系统的核心是选择一个好的字体。Ant Design 的字体家族中优先使用系统默认的界面字体，同时提供了一套利于屏显的备用字体库，来维护在不同平台以及浏览器的显示下字体始终保持良好的易读性和可读性，体现了友好，稳定和专业的特性。
- 英文文字体族：
```css
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
SimSun, sans-serif;
```
<img src="https://t.alipayobjects.com/images/T1bcXhXfNeXXXXXXXX.png" width="100%">
> 参考自：https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/
字体家族 css 代码如下：
## 字号
```css
font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
```
Ant Design 使用不同的字号和字重来传递视觉的信息层次。默认字体为 `12pt`，展示型页面可以设置为 `14pt`，其他字体字号相应升级。
![](https://zos.alipayobjects.com/rmsportal/UkvKkdJgvFqlewCWFyQE.png)
## 行高
行高会影响阅读的体验，西文的基本行高通常是字号的 `1.2em` 上下，而中文因为字符密实且高度一致，所以一般行高需要更大，`1.5em` 至 `1.8em` 之间是一个比较好的视觉阅读效果，Ant Design 规定默认文案字体行高为 `1.5em`，展示型页面可根据实际情况调整行高。
### 行高公式
<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/qFKnfXanJURiDsjJTKDP.png">
字体行高绝对值为『字号 x 1.5倍』。例如：12 号字体的行高为 `18px`，14 号字体的行高为 `21px`。
## 字体颜色
<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/kNFpUKqccPYxzfiQlFTh.png" description="注：表格中 @Black = #000000、@White = #FFFFFF、@Blue-6 = #108EE9">
文本颜色如果和背景颜色太接近就会很难以阅读，这对于深色背景和浅色背景同样适用。
## 字体使用规范
<div class="ant-row">
<div class="ant-col ant-col-12">
<div class="font-type">
<div class="font-title">主标题</div>
<h1>
<span>我是标题</span>
<span>加粗</span>
<span>#666</span>
<span>16px</span>
</h1>
</div>
<div class="font-type">
<div class="font-title">次级标题</div>
<h2>
<span>我是标题</span>
<span>加粗</span>
<span>#666</span>
<span>14px</span>
</h2>
</div>
<div class="font-type">
<div class="font-title">小标题</div>
<h3>
<span>我是标题</span>
<span>加粗</span>
<span>#666</span>
<span>12px</span>
</h3>
</div>
<div class="font-type text">
<div class="font-title">正文</div>
<p class="font-text">
<span>我是正文</span>
<span>#666</span>
<span>12px</span>
</p>
</div>
<div class="font-type help-text">
<div class="font-title">辅助文字</div>
<p class="font-text">
<span>我是辅助文字</span>
<span>#999</span>
<span>12px</span>
</p>
</div>
<div class="font-type disabled-text">
<div class="font-title">失效文字</div>
<p class="font-text">
<span>我是失效文字</span>
<span>#ccc</span>
<span>12px</span>
</p>
</div>
<div class="font-type link-text">
<div class="font-title">链接文字</div>
<p class="font-text">
<a href="#">
<span>我是链接文字</span>
<span>#108ee9</span>
<span>12px</span>
</a>
</p>
</div>
</div>
<div class="ant-col ant-col-12">
<div class="font-type">
<div class="font-title">Main Head</div>
<h1>
<span>I am example text</span>
<span>bold</span>
<span>#666</span>
<span>16px</span>
</h1>
</div>
<div class="font-type">
<div class="font-title">Sub Head</div>
<h2>
<span>I am example text</span>
<span>bold</span>
<span>#666</span>
<span>14px</span>
</h2>
</div>
<div class="font-type">
<div class="font-title">Small Head</div>
<h3>
<span>I am example text</span>
<span>bold</span>
<span>#666</span>
<span>12px</span>
</h3>
</div>
<div class="font-type text">
<div class="font-title">Text</div>
<p class="font-text">
<span>I am example text</span>
<span>#666</span>
<span>12px</span>
</p>
</div>
<div class="font-type help-text">
<div class="font-title">Help Text</div>
<p class="font-text">
<span>I am example text</span>
<span>#999</span>
<span>12px</span>
</p>
</div>
<div class="font-type disabled-text">
<div class="font-title">Disabled Text</div>
<p class="font-text">
<span>I am example text</span>
<span>#ccc</span>
<span>12px</span>
</p>
</div>
<div class="font-type link-text">
<div class="font-title">Link Text</div>
<p class="font-text">
<a href="#">
<span>I am example text</span>
<span>#108ee9</span>
<span>12px</span>
</a>
</p>
</div>
</div>
</div>
<style>
.font-type {
margin: 20px 0;
overflow: hidden;
font-size: 12px;
}
.font-type h1,
.font-type h2,
.font-type h3,
.font-type p {
margin: 0;
color: #666;
}
.font-type > * {
display: inline-block;
}
.font-title {
font-size: 14px;
width: 100px;
}
.font-type h1,
.font-type h2,
.font-type h3,
.font-type .font-text {
width: 300px;
}
.font-type h1 span,
.font-type h2 span,
.font-type h3 span,
.font-type .font-text span {
margin-right: 0.6em;
}
.font-type h1 {
font-size: 16px;
}
.font-type h2 {
font-size: 14px;
}
.font-type h3 {
font-size: 12px;
}
.disabled-text .font-text {
color: #ccc;
}
.help-text .font-text {
color: #999;
}
</style>
考虑到无障碍设计的需求，帮助那些弱视和色盲的用户也能轻松识别和阅读屏幕上的文字，我们参考了 WACG 2.0 的标准，文本和背景色之间至少保持最小 4.5:1 的对比度（AA 级），正文内容都保持了 7:1 以上的 AAA 级对比度。

2
site/theme/static/preview-img.less
View File

@ -24,7 +24,7 @@
}
.preview-image-wrapper {
background: #f4f4f4;
background: #f7f7f7;
padding: 16px;
display: inline-block;
text-align: center;

Write Preview
Loading…
Cancel
Save