字体
iOS字体
| iOS | |
|---|---|
| 中文 | 苹方 苹方 苹方 苹方 PingFang SC(font-weight:600) PingFang SC(font-weight:500) PingFang SC |
| 英文 | San Francisco San Francisco San Francisco San Francisco San Francisco(font-weight:600) San Francisco(font-weight:500) San Francisco |
| 数字 | San Francisco / JDZhengHT-EN 1234567890 ￥ % + - = . 1234567890 ￥ % + - = . 1234567890 ￥ % + - = . JDZhengHT-Bold JDZhengHT-Light(font-weight:700) JDZhengHT-Light |
Andriod字体
| Andriod | |
|---|---|
| 中文 | 思源黑体 思源黑体 思源黑体 思源黑体 Noto SansCJK(font-weight:600) Noto SansCJK(font-weight:500) Noto SansCJK |
| 英文 | Roboto Roboto Roboto Roboto Roboto(font-weight:600) Roboto(font-weight:500) Roboto |
| 数字 | Roboto / JDZhengHT-EN 1234567890 ￥ % + - = . 1234567890 ￥ % + - = . 1234567890 ￥ % + - = . JDZhengHT-Bold JDZhengHT-Light(font-weight:700) JDZhengHT-Light |
Font-family 代码
scss
font-family: "San Francisco", Rotobo, arial, "PingFang SC", "Noto SansCJK", "Microsoft Yahei", sans-serif;京东正黑 Font-family
CDN：
bash
# CDN 地址
https://static.360buyimg.com/bus/fonts/JDZhengHT/JDZhengHT-Light.ttf
https://static.360buyimg.com/bus/fonts/JDZhengHT/JDZhengHT-Light.woff
https://static.360buyimg.com/bus/fonts/JDZhengHT/JDZhengHT-Bold.ttf
https://static.360buyimg.com/bus/fonts/JDZhengHT/JDZhengHT-Bold.woff用法：
scss
@font-face {
font-family: 'JDZhengHT-Bold';
src: url('https://static.360buyimg.com/bus/fonts/JDZhengHT/JDZhengHT-Bold.woff') format('woff'), /* chrome, firefox */
url('https://static.360buyimg.com/bus/fonts/JDZhengHT/JDZhengHT-Bold.ttf') format('truetype'); /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
font-weight: normal;
font-style: normal
}
@font-face {
font-family: 'JDZhengHT-Light';
src: url('https://static.360buyimg.com/bus/fonts/JDZhengHT/JDZhengHT-Light.woff') format('woff'), /* chrome, firefox */
url('https://static.360buyimg.com/bus/fonts/JDZhengHT/JDZhengHT-Light.ttf') format('truetype'); /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
font-weight: normal;
font-style: normal
}
.type-JDZhengHT {
font-family: 'JDZhengHT-Light';
}
.type-JDZhengHT-Semibold {
font-family: 'JDZhengHT-Bold';
}字体使用规范
| 层级 | 字体大小 | 字号变量 | 字体颜色 | 字体颜色变量 |
|---|---|---|---|---|
| 大型标题 | 24px | $-fs-big | rgba(0, 0, 0, 0.85) | $-color-content |
| 重要数据 | 19px | $-fs-important | rgba(0, 0, 0, 0.85) | $-color-content |
| 标题字号/重要正文字号 | 16px | $-fs-title | rgba(0, 0, 0, 0.85) | $-color-content |
| 普通正文 | 14px | $-fs-content | rgba(0, 0, 0, 0.85) rgba(0, 0, 0, 0.65) rgba(0, 0, 0, 0.45) rgba(0, 0, 0, 0.25) | $-color-content |
| 次要信息，注释/补充/正文 | 12px | $-fs-secondary | rgba(0, 0, 0, 0.45) rgba(0, 0, 0, 0.25) | $-color-aid |
| 辅助文字，弱化信息，引导性/不可点文字 | 10px | $-fs-aid | rgba(0, 0, 0, 0.45) | $-color-aid |