From a187986823ae98214bb7379237d12d44e0beb392 Mon Sep 17 00:00:00 2001
From: Sivan <sivan@users.noreply.github.com>
Date: Tue, 18 Feb 2020 17:01:14 +0800
Subject: [PATCH] feat: add fonts for Traditional Chinese (#2)

* feat: update code style
* feat: add fonts for Traditional Chinese
---
 README.md                     |  4 +-
 lib/_base.scss                | 10 ++++
 lib/_font.scss                | 56 ++------------------
 lib/_inline.scss              |  6 ++-
 lib/_table.scss               |  5 +-
 lib/_variables.scss           | 12 ++---
 lib/fonts/_hei.scss           | 99 +++++++++++++++++++++++++++++++++++
 lib/fonts/_kai.scss           | 31 +++++++++++
 lib/fonts/_song.scss          | 45 ++++++++++++++++
 lib/heti.scss                 |  1 +
 lib/modifiers/ancient.scss    |  4 +-
 lib/modifiers/font-stack.scss | 23 +++++---
 package.json                  |  4 +-
 13 files changed, 224 insertions(+), 76 deletions(-)
 create mode 100644 lib/fonts/_hei.scss
 create mode 100644 lib/fonts/_kai.scss
 create mode 100644 lib/fonts/_song.scss

diff --git a/README.md b/README.md
index e928c72..3101566 100644
--- a/README.md
+++ b/README.md
@@ -7,7 +7,7 @@
 主要特性：
 - 全标签样式统一；
 - 贴合网格的排版；
-- 预置多种预设字体族（仅限桌面端）；
+- 预置简体/繁体中文多种预设字体族（仅限桌面端）；
 - 预置横排、直排（竖排）样式；
 - 预置古文、诗词样式；
 - 预置行间注排版样式；
@@ -37,10 +37,10 @@
 
 ## WIP
 
-- [ ] 繁体中文支持
 - [ ] 中、西文混排
 - [ ] 标点挤压
 - [ ] 标点悬挂
+- [x] 繁体中文支持
 - [x] 诗词版式
 - [x] 行间注版式
 
diff --git a/lib/_base.scss b/lib/_base.scss
index 80e5145..2e66e46 100644
--- a/lib/_base.scss
+++ b/lib/_base.scss
@@ -82,5 +82,15 @@
     word-wrap: normal;
     background-color: rgba(0, 0, 0, 0.054);
     border-radius: 4px;
+
+    code {
+      margin-inline-start: inherit;
+      margin-inline-end: inherit;
+      padding: 0;
+      border: 0;
+      border-radius: 0;
+      background-color: transparent;
+      color: inherit;
+    }
   }
 }
diff --git a/lib/_font.scss b/lib/_font.scss
index af70ef3..c9737e3 100644
--- a/lib/_font.scss
+++ b/lib/_font.scss
@@ -2,56 +2,6 @@
  * Author: Sivan [sun.sivan@gmail.com]
  * Description: define font-face.
  */
-@import "variables";
-
-// 黑体
-@font-face {
-  font-family: "Heti-Hei";
-  src: local("PingFang SC Light"), local("Heiti SC Light"), local("STXihei");
-  font-weight: 200;
-}
-
-@font-face {
-  font-family: "Heti-Hei";
-  src: local("Pingfang SC Regular"), local("Heiti SC Medium"), local(STHeiti);
-  font-weight: 400;
-}
-
-@font-face {
-  font-family: "Heti-Hei";
-  src: local("PingFang SC Medium"), local("Heiti SC Light");
-  font-weight: 600;
-}
-
-@font-face {
-  font-family: "Heti-Hei";
-  src: local("Pingfang SC Semibold"), local("Heiti SC Light");
-  font-weight: 800;
-}
-
-// 宋体
-
-// 楷体
-@font-face {
-  font-family: "Heti-Kai";
-  src: local("Kaiti SC Regular"), local("Heiti SC Light");
-  font-weight: 200;
-}
-
-@font-face {
-  font-family: "Heti-Kai";
-  src: local("Kaiti SC Regular"), local(STKaiti);
-  font-weight: 400;
-}
-
-@font-face {
-  font-family: "Heti-Kai";
-  src: local("Kaiti SC Bold"), local(STKaiti);
-  font-weight: 600;
-}
-
-@font-face {
-  font-family: "Heti-Kai";
-  src: local("Kaiti SC Black"), local(STKaiti);
-  font-weight: 800;
-}
+@import "fonts/hei";
+@import "fonts/song";
+@import "fonts/kai";
diff --git a/lib/_inline.scss b/lib/_inline.scss
index 4904b82..8857082 100644
--- a/lib/_inline.scss
+++ b/lib/_inline.scss
@@ -28,8 +28,10 @@
   }
 
   code {
+    margin-inline-start: 0.25em;
+    margin-inline-end: 0.25em;
     font-family: $font-family-mono;
-    font-size: $font-size-small;
+    font-size: 0.875em;
   }
 
   dfn {
@@ -124,7 +126,7 @@
   }
 
   summary {
-    padding-left: 1em;
+    padding-inline-start: 1em;
     outline: 0;
     cursor: pointer;
   }
diff --git a/lib/_table.scss b/lib/_table.scss
index 0c0c7cd..4f59cd6 100644
--- a/lib/_table.scss
+++ b/lib/_table.scss
@@ -19,7 +19,10 @@
   th,
   td {
     border: 1px solid #ccc;
-    padding: 8px 16px;
+    padding-block-start: 8px;
+    padding-block-end: 8px;
+    padding-inline-start: 16px;
+    padding-inline-end: 16px;
   }
 
   caption {
diff --git a/lib/_variables.scss b/lib/_variables.scss
index cd88303..aeea02a 100644
--- a/lib/_variables.scss
+++ b/lib/_variables.scss
@@ -8,18 +8,18 @@ $root-selector: '.heti' !default;
 
 /* 字体 Fonts */
 // 字体栈 Font Stacks
-$_font-stack-hei: "Pingfang SC", "Heiti SC", "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC", "WenQuanYi Micro Hei" !default;
-$_font-stack-song: "Songti SC", STSong, SimSun !default;
-$_font-stack-kai: "Kaiti SC", STKaiti !default;
 $_font-stack-sans: "Helvetica Neue", Helvetica, Arial !default;
 $_font-stack-serif: "Times New Roman", Times !default;
 $_font-stack-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier !default;
 $_font-stack-symbol: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
 
 // 字体族 Font Families
-$font-family-hei: $_font-stack-sans, $_font-stack-hei, sans-serif, $_font-stack-symbol !default;
-$font-family-song: $_font-stack-serif, $_font-stack-song, serif, $_font-stack-symbol !default;
-$font-family-kai: $_font-stack-serif, $_font-stack-kai, serif, $_font-stack-symbol !default;
+$font-family-hei: $_font-stack-sans, "Heti Hei", sans-serif, $_font-stack-symbol !default;
+$font-family-song: $_font-stack-serif, "Heti Song", serif, $_font-stack-symbol !default;
+$font-family-kai: $_font-stack-serif, "Heti Kai", serif, $_font-stack-symbol !default;
+$font-family-hei-black: $_font-stack-sans, "Heti Hei Black", sans-serif, $_font-stack-symbol !default;
+$font-family-song-black: $_font-stack-serif, "Heti Song Black", serif, $_font-stack-symbol !default;
+$font-family-kai-black: $_font-stack-serif, "Heti Kai Black", serif, $_font-stack-symbol !default;
 $font-family-mono: $_font-stack-mono, monospace, $_font-stack-symbol !default;
 
 // 字重 Font Weights
diff --git a/lib/fonts/_hei.scss b/lib/fonts/_hei.scss
new file mode 100644
index 0000000..cae3c8a
--- /dev/null
+++ b/lib/fonts/_hei.scss
@@ -0,0 +1,99 @@
+/**
+ * Author: Sivan [sun.sivan@gmail.com]
+ * Description: define font-face Heti Hei.
+ */
+
+// 标准 Regular
+@font-face {
+  font-family: "Heti Hei";
+  src:
+    local("PingFang SC Regular"),
+    local("PingFang TC Regular"),
+    local("Hiragino Sans GB W3"),
+    local("Heiti SC Regular"),
+    local("Heiti TC Regular"),
+    local("Microsoft YaHei"),
+    local("Microsoft Jhenghei"),
+    local("Source Han Sans CN Regular"),
+    local("Source Han Sans HK Regular"),
+    local("Source Han Sans TW Regular"),
+    local("Source Han Sans JP Regular"),
+    local("Source Han Sans KR Regular"),
+    local("Noto Sans CJK SC Regular"),
+    local("Noto Sans CJK TC Regular"),
+    local("Noto Sans CJK JP Regular"),
+    local("Noto Sans CJK KR Regular"),
+    local("WenQuanYi Micro Hei"),
+    local("Droid Sans Fallback");
+}
+
+// 细体 Light
+@font-face {
+  font-family: "Heti Hei";
+  font-weight: 200;
+  src:
+    local("PingFang SC Light"),
+    local("PingFang TC Light"),
+    local("Heiti SC Light"),
+    local("Heiti TC Light"),
+    local("Microsoft YaHei Light"),
+    local("Microsoft Jhenghei Light"),
+    local("Source Han Sans CN Light"),
+    local("Source Han Sans HK Light"),
+    local("Source Han Sans TW Light"),
+    local("Source Han Sans JP Light"),
+    local("Source Han Sans KR Light"),
+    local("Noto Sans CJK SC Light"),
+    local("Noto Sans CJK TC Light"),
+    local("Noto Sans CJK JP Light"),
+    local("Noto Sans CJK KR Light");
+}
+
+// 粗体 Bold
+@font-face {
+  font-family: "Heti Hei";
+  font-weight: 600;
+  src:
+    local("PingFang SC Medium"),
+    local("Hiragino Sans GB W6"),
+    local("PingFang TC Medium"),
+    local("Heiti SC Medium"),
+    local("Heiti TC Medium"),
+    local("Microsoft YaHei Bold"),
+    local("Microsoft Jhenghei Bold"),
+    local("Source Han Sans CN Bold"),
+    local("Source Han Sans HK Bold"),
+    local("Source Han Sans TW Bold"),
+    local("Source Han Sans JP Bold"),
+    local("Source Han Sans KR Bold"),
+    local("Noto Sans CJK SC Bold"),
+    local("Noto Sans CJK TC Bold"),
+    local("Noto Sans CJK JP Bold"),
+    local("Noto Sans CJK KR Bold");
+}
+
+// 黑体 Black
+@font-face {
+  font-family: "Heti Hei Black";
+  font-weight: 800;
+  src:
+    local("Lantinghei SC Heavy"),
+    local("Lantinghei TC Heavy"),
+    local("PingFang SC Semibold"),
+    local("PingFang TC Semibold"),
+    local("Hiragino Sans GB W6"),
+    local("Heiti SC Medium"),
+    local("Heiti TC Medium"),
+    local("Microsoft YaHei Bold"),
+    local("Microsoft Jhenghei Bold"),
+    local("Source Han Sans CN Heavy"),
+    local("Source Han Sans HK Heavy"),
+    local("Source Han Sans TW Heavy"),
+    local("Source Han Sans JP Heavy"),
+    local("Source Han Sans KR Heavy"),
+    local("Noto Sans CJK SC Heavy"),
+    local("Noto Sans CJK TC Heavy"),
+    local("Noto Sans CJK JP Heavy"),
+    local("Noto Sans CJK KR Heavy"),
+    local("Droid Sans Fallback");
+}
diff --git a/lib/fonts/_kai.scss b/lib/fonts/_kai.scss
new file mode 100644
index 0000000..1f4e7c1
--- /dev/null
+++ b/lib/fonts/_kai.scss
@@ -0,0 +1,31 @@
+/**
+ * Author: Sivan [sun.sivan@gmail.com]
+ * Description: define font-face Heti Kai.
+ */
+
+// 标准 Regular
+@font-face {
+  font-family: "Heti Kai";
+  src:
+    local("Kaiti SC Regular"),
+    local("Kaiti TC Regular"),
+    local("BiauKai");
+}
+
+// 粗体 Bold
+@font-face {
+  font-family: "Heti Kai";
+  font-weight: 600;
+  src:
+    local("Kaiti SC Bold"),
+    local("Kaiti TC Bold");
+}
+
+// 黑体 Black
+@font-face {
+  font-family: "Heti Kai Black";
+  font-weight: 800;
+  src:
+    local("Kaiti SC Black"),
+    local("Kaiti TC Black");
+}
diff --git a/lib/fonts/_song.scss b/lib/fonts/_song.scss
new file mode 100644
index 0000000..dffa78d
--- /dev/null
+++ b/lib/fonts/_song.scss
@@ -0,0 +1,45 @@
+/**
+ * Author: Sivan [sun.sivan@gmail.com]
+ * Description: define font-face Heti Song.
+ */
+
+// 标准 Regular
+@font-face {
+  font-family: "Heti Song";
+  src:
+    local("Songti SC Regular"),
+    local("Songti TC Regular"),
+    local("SimSun");
+}
+
+// 细体 Light
+@font-face {
+  font-family: "Heti Song";
+  font-weight: 200;
+  src:
+    local("Songti SC Light"),
+    local("Songti TC Light"),
+    local(STSong),
+    local("SimSun");
+}
+
+// 粗体 Bold
+@font-face {
+  font-family: "Heti Song";
+  font-weight: 600;
+  src:
+    local("Songti SC Bold"),
+    local("Songti TC Bold"),
+    local("SimSun");
+}
+
+// 黑体 Black
+// 只支持简体
+@font-face {
+  font-family: "Heti Song Black";
+  font-weight: 800;
+  src:
+    local("Songti SC Black"),
+    // local("Songti TC Black"),
+    local("SimSun");
+}
diff --git a/lib/heti.scss b/lib/heti.scss
index 3d9f3d5..ebed018 100644
--- a/lib/heti.scss
+++ b/lib/heti.scss
@@ -1,6 +1,7 @@
 /**
  * Author: Sivan [sun.sivan@gmail.com]
  */
+@import "font";
 @import "variables";
 @import "base";
 @import "heading";
diff --git a/lib/modifiers/ancient.scss b/lib/modifiers/ancient.scss
index 4932a32..bd5e05c 100644
--- a/lib/modifiers/ancient.scss
+++ b/lib/modifiers/ancient.scss
@@ -18,13 +18,13 @@
     h4,
     h5,
     h6 {
-      font-family: $font-family-kai;
+      font-family: $font-family-kai-black;
       font-weight: $font-weight-bolder;
       text-align: center;
 
       // 标题内元信息仅在桌面端采取悬挂处理，且不占据空间影响文字居中
       #{$root-selector}-meta {
-        font-weight: 400;
+        font-weight: $font-weight-normal;
 
         @media screen and (min-width: 640px) {
           @include hang();
diff --git a/lib/modifiers/font-stack.scss b/lib/modifiers/font-stack.scss
index f8fd8f2..4aee106 100644
--- a/lib/modifiers/font-stack.scss
+++ b/lib/modifiers/font-stack.scss
@@ -22,23 +22,18 @@
     // 正文使用宋体
     font-family: $font-family-song;
 
-    // 标题使用 800 字重
+    // 标题使用楷体 800 字重
     h1,
     h2,
     h3,
     h4,
     h5,
     h6 {
+      font-family: $font-family-kai-black;
       font-weight: $font-weight-bolder;
     }
 
-    // 标题、引用使用楷体
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6,
+    // 引用使用楷体
     blockquote,
     cite,
     q {
@@ -52,4 +47,16 @@
       font-family: $font-family-hei;
     }
   }
+
+  &--hei {
+    font-family: $font-family-hei;
+  }
+
+  &--song {
+    font-family: $font-family-song;
+  }
+
+  &--kai {
+    font-family: $font-family-kai;
+  }
 }
diff --git a/package.json b/package.json
index 55ba5e1..4767cdd 100644
--- a/package.json
+++ b/package.json
@@ -1,13 +1,13 @@
 {
   "name": "heti",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "赫蹏",
   "main": "index.scss",
   "directories": {
     "lib": "lib"
   },
   "scripts": {
-    "start": "node-sass -w --output-style=nested index.scss dist/heti.css",
+    "start": "node-sass -w --output-style=compressed index.scss dist/heti.css",
     "build": "node-sass index.scss dist/heti.css --output-style=compressed",
     "deploy": "gh-pages -d dist",
     "test": "npx stylelint --config .stylelintrc 'lib/**/*.scss'"