feat: add fonts for Traditional Chinese (#2)

* feat: update code style
* feat: add fonts for Traditional Chinese

README.md

@@ -7,7 +7,7 @@
 主要特性：
 - 全标签样式统一；
 - 贴合网格的排版；
-- 预置多种预设字体族（仅限桌面端）；
+- 预置简体/繁体中文多种预设字体族（仅限桌面端）；
 - 预置横排、直排（竖排）样式；
 - 预置古文、诗词样式；
 - 预置行间注排版样式；
@@ -37,10 +37,10 @@
 
 ## WIP
 
-- [ ] 繁体中文支持
 - [ ] 中、西文混排
 - [ ] 标点挤压
 - [ ] 标点悬挂
+- [x] 繁体中文支持
 - [x] 诗词版式
 - [x] 行间注版式
 

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;
+    }
   }
 }

lib/_font.scss

@@ -2,56 +2,6 @@
  * Author: Sivan [sun.sivan@gmail.com]
  * Description: define font-face.
  */
-@import "variables";
+@import "fonts/hei";
-
+@import "fonts/song";
-// 黑体
+@import "fonts/kai";
-@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;
-}

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;
   }

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 {

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-hei: $_font-stack-sans, "Heti Hei", sans-serif, $_font-stack-symbol !default;
-$font-family-song: $_font-stack-serif, $_font-stack-song, serif, $_font-stack-symbol !default;
+$font-family-song: $_font-stack-serif, "Heti Song", serif, $_font-stack-symbol !default;
-$font-family-kai: $_font-stack-serif, $_font-stack-kai, 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

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");
+}

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");
+}

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");
+}

lib/heti.scss

@@ -1,6 +1,7 @@
 /**
  * Author: Sivan [sun.sivan@gmail.com]
  */
+@import "font";
 @import "variables";
 @import "base";
 @import "heading";

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();

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;
+  }
 }

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'"