feat: add fonts for Traditional Chinese
This commit is contained in:
parent
3321e9ebfe
commit
81c615db4d
12 changed files with 211 additions and 75 deletions
|
@ -7,7 +7,7 @@
|
|||
主要特性:
|
||||
- 全标签样式统一;
|
||||
- 贴合网格的排版;
|
||||
- 预置多种预设字体族(仅限桌面端);
|
||||
- 预置简体/繁体中文多种预设字体族(仅限桌面端);
|
||||
- 预置横排、直排(竖排)样式;
|
||||
- 预置古文、诗词样式;
|
||||
- 预置行间注排版样式;
|
||||
|
@ -37,10 +37,10 @@
|
|||
|
||||
## WIP
|
||||
|
||||
- [ ] 繁体中文支持
|
||||
- [ ] 中、西文混排
|
||||
- [ ] 标点挤压
|
||||
- [ ] 标点悬挂
|
||||
- [x] 繁体中文支持
|
||||
- [x] 诗词版式
|
||||
- [x] 行间注版式
|
||||
|
||||
|
|
|
@ -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";
|
||||
|
|
|
@ -126,7 +126,7 @@
|
|||
}
|
||||
|
||||
summary {
|
||||
padding-left: 1em;
|
||||
padding-inline-start: 1em;
|
||||
outline: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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
99
lib/fonts/_hei.scss
Normal 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
31
lib/fonts/_kai.scss
Normal 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
45
lib/fonts/_song.scss
Normal 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,6 +1,7 @@
|
|||
/**
|
||||
* Author: Sivan [sun.sivan@gmail.com]
|
||||
*/
|
||||
@import "font";
|
||||
@import "variables";
|
||||
@import "base";
|
||||
@import "heading";
|
||||
|
|
|
@ -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();
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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'"
|
||||
|
|
Loading…
Reference in a new issue