如何在CSS中使用思源宋体字体家族

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/10/28/%E5%A6%82%E4%BD%95%E5%9C%A8CSS%E4%B8%AD%E4%BD%BF%E7%94%A8%E6%80%9D%E6%BA%90%E5%AE%8B%E4%BD%93%E5%AD%97%E4%BD%93%E5%AE%B6%E6%97%8F/

摘要

本文主要讲述了：

什么是思源宋体
如何在 CSS 中使用思源宋体字体家族

正文

什么是思源宋体

思源宋体，英文名为 Source Han Serif，是继思源黑体之后，由 Adobe 和 Google 领导的技术团队于 2017 年 4 月 3 日推出的一款开源的有衬线的字体家族。

思源宋体支持 4 种文字：

简体中文
繁体中文
日文
朝鲜文（即韩文）

思源宋体从细到粗共有 7 种字重：

ExtraLight
Light
Regular
Medium
SemiBold
Bold
Heavy

其中，每一种字重都包括 65535 个字形，思源宋体一共包含 458745 个字符。

思源宋体的字体文件在 Github 上开放下载（注意：在release分支上），中国大陆地区的用户也可以在清华大学镜像站进行下载。

如何在 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="source-han-serif">
      <div>思源宋体字体家族</div>
      <div>思源宋体字体家族</div>
      <div>思源宋体字体家族</div>
      <div>思源宋体字体家族</div>
      <div>思源宋体字体家族</div>
      <div>思源宋体字体家族</div>
      <div>思源宋体字体家族</div>
    </div>
    <style>
      /* 对照组 */
      .control-group {
        font-size: 64px;
      }

      /* 思源宋体字体家族 */
      .source-han-serif > div {
        font-size: 64px;
      }
      .source-han-serif > div:nth-child(1) {
        font-family: 'Source Han Serif ExtraLight';
      }
      .source-han-serif > div:nth-child(2) {
        font-family: 'Source Han Serif Light';
      }
      .source-han-serif > div:nth-child(3) {
        font-family: 'Source Han Serif';
      }
      .source-han-serif > div:nth-child(4) {
        font-family: 'Source Han Serif Medium';
      }
      .source-han-serif > div:nth-child(5) {
        font-family: 'Source Han Serif SemiBold';
      }
      .source-han-serif > div:nth-child(6) {
        font-family: 'Source Han Serif';
        font-weight: bold;
      }
      .source-han-serif > div:nth-child(7) {
        font-family: 'Source Han Serif Heavy';
      }
    </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>