Skip to content

字体

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-bigrgba(0, 0, 0, 0.85)$-color-content
重要数据19px$-fs-importantrgba(0, 0, 0, 0.85)$-color-content
标题字号/重要正文字号16px$-fs-titlergba(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-aidrgba(0, 0, 0, 0.45)$-color-aid

Released under the MIT License.

Released under the MIT License.