zhao/heti
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

feat: add fonts for Traditional Chinese (#2)

Browse source 
* feat: update code style
* feat: add fonts for Traditional Chinese
This commit is contained in:
Sivan 2020-02-18 17:01:14 +08:00 committed by GitHub
parent fd5e303b2c
commit a187986823
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
13 changed files with 224 additions and 76 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
README.md
View file

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

10
lib/_base.scss
View file

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

56
lib/_font.scss
View file

@ -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";

6
lib/_inline.scss
View file

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

5
lib/_table.scss
View file

@ -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 {

12
lib/_variables.scss
View file

@ -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

99
lib/fonts/_hei.scss Normal file
View file

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

31
lib/fonts/_kai.scss Normal file
View file

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

45
lib/fonts/_song.scss Normal file
View file

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

1
lib/heti.scss
View file

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

4
lib/modifiers/ancient.scss
View file

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

23
lib/modifiers/font-stack.scss
View file

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

4
package.json
View file

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