语言►CSS

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

本文作者: jsweibo

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

摘要

本文主要讲述了：

  1. 什么是思源黑体
  2. 如何在 CSS 中使用思源黑体字体家族

正文

什么是思源黑体

思源黑体，英文名为 Source Han Sans，由 Adobe 和 Google 领导的技术团队于 2014 年 7 月 16 日推出的一款开源的无衬线的字体家族。

思源黑体支持 4 种文字：

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

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

  • ExtraLight
  • Light
  • Normal
  • Regular
  • Medium
  • Bold
  • Heavy

思源黑体 HW 在思源黑体的基础上，为英文字母、阿拉伯数字以及部分符号制作了半角（half width）字形。思源黑体 HW 在 1.002 版本中被引入思源黑体，因此安装思源黑体将获得 2 种字体家族。

思源黑体 HW 从细到粗共有 2 种字重：

  • Regular
  • Bold

思源黑体的字体文件在 Github 上开放下载，中国大陆地区的用户也可以在清华大学镜像站进行下载。

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

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<!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>
    <div class="control-group">思源黑体 HW 字体家族</div>
    <hr />
    <!-- 思源黑体字体家族 -->
    <div class="source-han-sans">
      <div>思源黑体字体家族</div>
      <div>思源黑体字体家族</div>
      <div>思源黑体字体家族</div>
      <div>思源黑体字体家族</div>
      <div>思源黑体字体家族</div>
      <div>思源黑体字体家族</div>
      <div>思源黑体字体家族</div>
    </div>
    <!-- 思源黑体 HW 字体家族 -->
    <div class="source-han-sans-hw">
      <div>思源黑体 HW 字体家族</div>
      <div>思源黑体 HW 字体家族</div>
    </div>
    <style>
      /* 对照组 */
      .control-group {
        font-size: 64px;
      }

      /* 思源黑体字体家族 */
      .source-han-sans > div {
        font-size: 64px;
      }
      .source-han-sans > div:nth-child(1) {
        font-family: 'Source Han Sans ExtraLight';
      }
      .source-han-sans > div:nth-child(2) {
        font-family: 'Source Han Sans Light';
      }
      .source-han-sans > div:nth-child(3) {
        font-family: 'Source Han Sans Normal';
      }
      .source-han-sans > div:nth-child(4) {
        font-family: 'Source Han Sans';
      }
      .source-han-sans > div:nth-child(5) {
        font-family: 'Source Han Sans Medium';
      }
      .source-han-sans > div:nth-child(6) {
        font-family: 'Source Han Sans';
        font-weight: bold;
      }
      .source-han-sans > div:nth-child(7) {
        font-family: 'Source Han Sans Heavy';
      }

      /* 思源黑体 HW 字体家族*/
      .source-han-sans-hw {
        font-size: 64px;
      }
      .source-han-sans-hw > div:nth-child(1) {
        font-family: 'Source Han Sans HW';
      }
      .source-han-sans-hw > div:nth-child(2) {
        font-family: 'Source Han Sans HW';
        font-weight: bold;
      }
    </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>

测试结果：

System Browser Name Browser Version Result
Windows 10 IE 11.0 测试通过
Windows 10 Firefox 78.0 测试通过
Windows 10 Edg 83.0.478.58 Source Han Sans Normal无效
Windows 10 Chrome 83.0.4103.116 Source Han Sans Normal无效

参考资料

本文作者: jsweibo

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

本文对你有帮助？请支持我

支付宝
微信