如何在CSS中使用苹方字体家族

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/01/31/%E5%A6%82%E4%BD%95%E5%9C%A8CSS%E4%B8%AD%E4%BD%BF%E7%94%A8%E8%8B%B9%E6%96%B9%E5%AD%97%E4%BD%93%E5%AE%B6%E6%97%8F/

摘要

本文主要讲述了：

什么是苹方字体家族
如何在 CSS 中使用苹方字体家族

正文

什么是苹方字体家族

苹方字体，英文名为 PingFang，由苹果公司于 2015 年 6 月 8 日发布，是一款无衬线的字体家族。

苹方字体支持 3 种文字：

HK 香港繁体中文
SC 简体中文
TC 台湾繁体中文

苹方字体从细到粗共有 6 种字重：

Ultralight 极细体
Thin 纤细体
Light 细体
Regular 常规体
Medium 中黑体
Semibold 中粗体

将文字和字重进行排列，可以得到以下列表：

PingFangHK-Ultralight 香港繁体中文极细体
PingFangHK-Thin 香港繁体中文纤细体
PingFangHK-Light 香港繁体中文细体
PingFangHK-Regular 香港繁体中文常规体
PingFangHK-Medium 香港繁体中文中黑体
PingFangHK-Semibold 香港繁体中文中粗体
PingFangSC-Ultralight 简体中文极细体
PingFangSC-Thin 简体中文纤细体
PingFangSC-Light 简体中文细体
PingFangSC-Regular 简体中文常规体
PingFangSC-Medium 简体中文中黑体
PingFangSC-Semibold 简体中文中粗体
PingFangTC-Ultralight 台湾繁体中文极细体
PingFangTC-Thin 台湾繁体中文纤细体
PingFangTC-Light 台湾繁体中文细体
PingFangTC-Regular 台湾繁体中文常规体
PingFangTC-Medium 台湾繁体中文中黑体
PingFangTC-Semibold 台湾繁体中文中粗体

如何在 CSS 中使用苹方字体家族

示例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 对照组 -->
    <div class="control-group">苹方字体家族</div>
    <hr />
    <!-- 苹方字体家族 -->
    <div class="pingfang">
      <div>苹方字体家族</div>
      <div>苹方字体家族</div>
      <div>苹方字体家族</div>
      <div>苹方字体家族</div>
      <div>苹方字体家族</div>
      <div>苹方字体家族</div>
    </div>
    <style>
      /* 对照组 */
      .control-group {
        font-size: 64px;
      }

      /* 苹方字体家族 */
      .pingfang > div {
        font-size: 64px;
      }
      .pingfang > div:nth-child(1) {
        font-family: 'PingFangSC-Ultralight';
      }
      .pingfang > div:nth-child(2) {
        font-family: 'PingFangSC-Thin';
      }
      .pingfang > div:nth-child(3) {
        font-family: 'PingFangSC-Light';
      }
      .pingfang > div:nth-child(4) {
        font-family: 'PingFangSC';
      }
      .pingfang > div:nth-child(5) {
        font-family: 'PingFangSC-Medium';
      }
      .pingfang > div:nth-child(6) {
        font-family: 'PingFangSC-Semibold';
      }
    </style>
    <script>
      window.addEventListener('load', function () {
        document.body.appendChild(document.createElement('hr'));
        const foo = document.createElement('div');
        foo.textContent = navigator.userAgent;
        document.body.appendChild(foo);
        document.body.appendChild(document.createElement('hr'));
      });
    </script>
  </body>
</html>