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/_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 b947de7..8857082 100644 --- a/lib/_inline.scss +++ b/lib/_inline.scss @@ -126,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'"