在网页上使用苹方字体

Posted by 任平生 on November 18, 2015

随着 El Capitan 和 iOS9 发布而内置新系统中的 苹方字体 给我们在中文字体的使用上带来了新的选择。

在 Web 上定义字体为苹方的方法:

font-family: PingFangSC-Regular, sans-serif;

苹方提供了六个字重,font-family 定义如下:

苹方-简 常规体

font-family: PingFangSC-Regular, sans-serif;
常规体 示例: 一蓑烟雨任平生 To be or not to be, that is the question

苹方-简 极细体

font-family: PingFangSC-Ultralight, sans-serif;
常规体 示例: 一蓑烟雨任平生 To be or not to be, that is the question

苹方-简 细体

font-family: PingFangSC-Light, sans-serif;
细体 示例: 一蓑烟雨任平生 To be or not to be, that is the question

苹方-简 纤细体

font-family: PingFangSC-Thin, sans-serif;
纤细体 示例: 一蓑烟雨任平生 To be or not to be, that is the question

苹方-简 中黑体

font-family: PingFangSC-Medium, sans-serif;
中黑体 示例: 一蓑烟雨任平生 To be or not to be, that is the question

苹方-简 中粗体

font-family: PingFangSC-Semibold, sans-serif;
中粗体 示例: 一蓑烟雨任平生 To be or not to be, that is the question

苹方除了简体的:苹方-简(PingFang SC),还为繁体用户提供有:苹方-繁(PingFang TC) ,苹方-港(PingFang HK)

苹方-繁 的 CSS font-family 使用:

font-family: PingFangTC-Regular, sans-serif;
font-family: PingFangTC-Ultralight, sans-serif;
font-family: PingFangTC-Light, sans-serif;
font-family: PingFangTC-Thin, sans-serif;
font-family: PingFangTC-Medium, sans-serif;
font-family: PingFangTC-Semibold, sans-serif;

苹方-港 的 CSS font-family 使用:

font-family: PingFangHK-Regular, sans-serif;
font-family: PingFangHK-Ultralight, sans-serif;
font-family: PingFangHK-Light, sans-serif;
font-family: PingFangHK-Thin, sans-serif;
font-family: PingFangHK-Medium, sans-serif;
font-family: PingFangHK-Semibold, sans-serif;