18s 0.2.9 → 0.2.15
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/QQlP.woff2 +0 -0
- package/README.md +35 -31
- package/_.css +1 -1
- package/{FT7_.woff2 → a6CQ.woff2} +0 -0
- package/package.json +2 -2
- package/rd6A.woff2 +0 -0
- package/t.css +1 -1
- package/2-pP.woff2 +0 -0
- package/Gy2k.woff2 +0 -0
package/QQlP.woff2
ADDED
|
Binary file
|
package/README.md
CHANGED
|
@@ -3,7 +3,9 @@
|
|
|
3
3
|
---
|
|
4
4
|
|
|
5
5
|
<a id="en"></a>
|
|
6
|
-
# 18s :
|
|
6
|
+
# 18s : Chinese font subsetting packages for the WebC component library
|
|
7
|
+
|
|
8
|
+
WebC is a Web Components library designed for AI-assisted development. This package provides Chinese font subsetting support for WebC.
|
|
7
9
|
|
|
8
10
|
Online Preview: [https://webc-zh.github.io](https://webc-zh.github.io)
|
|
9
11
|
|
|
@@ -16,10 +18,10 @@ Online Preview: [https://webc-zh.github.io](https://webc-zh.github.io)
|
|
|
16
18
|
|
|
17
19
|
## Features
|
|
18
20
|
|
|
19
|
-
- **
|
|
20
|
-
- **Cache Busting**: Uses MD5 hashes of chunk content as filenames to prevent
|
|
21
|
-
- **
|
|
22
|
-
- **
|
|
21
|
+
- **Chinese Font Subsetting**: Splits Chinese fonts (CJK) into WOFF2 chunks (128KB) to reduce loading times.
|
|
22
|
+
- **Cache Busting**: Uses MD5 hashes of chunk content as filenames to prevent collision and improve caching.
|
|
23
|
+
- **Variable Fonts**: Includes Source Han Sans SC (`t`) and JetBrains Mono (`c`).
|
|
24
|
+
- **CSS**: Outputs minimized CSS containing `@font-face` rules mapping character ranges to chunks.
|
|
23
25
|
|
|
24
26
|
## Directory Structure
|
|
25
27
|
|
|
@@ -44,21 +46,21 @@ Online Preview: [https://webc-zh.github.io](https://webc-zh.github.io)
|
|
|
44
46
|
|
|
45
47
|
## Design & Process
|
|
46
48
|
|
|
47
|
-
The compiler processes fonts defined in `gen/ttf/gen.yml`, splitting them and preparing
|
|
49
|
+
The compiler processes fonts defined in `gen/ttf/gen.yml`, splitting them and preparing CSS and font chunks.
|
|
48
50
|
|
|
49
51
|
```mermaid
|
|
50
52
|
graph TD
|
|
51
|
-
A[Font
|
|
52
|
-
B --> C[Generate WOFF2
|
|
53
|
-
C --> D[Rename WOFF2 subsets to
|
|
54
|
-
D --> E[Rewrite
|
|
55
|
-
E --> F[Output
|
|
53
|
+
A[Font files: SourceHanSansSC / JetBrainsMono] --> B[fontSplit / cn-font-split]
|
|
54
|
+
B --> C[Generate WOFF2 subsets & result.css]
|
|
55
|
+
C --> D[Rename WOFF2 subsets to MD5 Base64url hashes]
|
|
56
|
+
D --> E[Rewrite CSS font-family & URLs]
|
|
57
|
+
E --> F[Output woff2/t.css, woff2/c.css & woff2/_.css]
|
|
56
58
|
```
|
|
57
59
|
|
|
58
60
|
1. **Splitting**: Fonts are subsetted using `cn-font-split` into WOFF2 chunks.
|
|
59
|
-
2. **Hashing**: Each chunk
|
|
60
|
-
3. **Rewriting**:
|
|
61
|
-
4. **Publishing**:
|
|
61
|
+
2. **Hashing**: Each chunk is renamed to its MD5 base64url hash (starting at length 4, expanding on conflict).
|
|
62
|
+
3. **Rewriting**: CSS is parsed to replace font-family names with aliases (`t` and `c`), omit local paths, and update chunk URLs.
|
|
63
|
+
4. **Publishing**: CSS and WOFF2 chunks are output to `woff2/` for npm publication.
|
|
62
64
|
|
|
63
65
|
## Tech Stack
|
|
64
66
|
|
|
@@ -105,16 +107,18 @@ code {
|
|
|
105
107
|
|
|
106
108
|
## History & Background
|
|
107
109
|
|
|
108
|
-
CJK
|
|
110
|
+
CJK font files are large (10MB to 50MB) as they contain tens of thousands of glyphs. Loading them in browsers causes rendering latency. Previously, developers embedded static character subsets or relied on system defaults, limiting design options.
|
|
109
111
|
|
|
110
|
-
Source Han Sans, introduced
|
|
112
|
+
Source Han Sans, introduced by Adobe and Google in 2014, solved CJK typeface quality issues but still had large file sizes. Font splitters like `cn-font-split` split these typefaces into chunks based on character frequency. Browsers fetch chunks containing characters present on the page, improving performance.
|
|
111
113
|
|
|
112
|
-
JetBrains Mono, released in 2020,
|
|
114
|
+
JetBrains Mono, released in 2020, is designed for readability. Project `18s` bundles these typefaces as variable fonts to provide Chinese font support for WebC.
|
|
113
115
|
|
|
114
116
|
---
|
|
115
117
|
|
|
116
118
|
<a id="zh"></a>
|
|
117
|
-
# 18s :
|
|
119
|
+
# 18s : WebC 组件库中文字体分片包
|
|
120
|
+
|
|
121
|
+
WebC 是面向 AI 辅助开发的 Web Components 组件库。本包为 WebC 提供中文字体分片支持。
|
|
118
122
|
|
|
119
123
|
组件库在线浏览地址:[https://webc-zh.github.io](https://webc-zh.github.io)
|
|
120
124
|
|
|
@@ -127,10 +131,10 @@ JetBrains Mono, released in 2020, focuses on readability for developers. Project
|
|
|
127
131
|
|
|
128
132
|
## 功能特性
|
|
129
133
|
|
|
130
|
-
-
|
|
134
|
+
- **中文字体分片**:将中文字体(CJK)切分为 WOFF2 分片(默认 128KB),降低加载时延。
|
|
131
135
|
- **防止冲突**:基于分片内容生成 MD5 哈希作为文件名,解决缓存冲突并提升缓存命中率。
|
|
132
136
|
- **可变字重**:提供思源黑体(`t`)与 JetBrains Mono(`c`)可变字重版本。
|
|
133
|
-
-
|
|
137
|
+
- **CSS**:输出压缩的 CSS 代码,内置 `@font-face` 规则,映射字符区间至对应字体分片。
|
|
134
138
|
|
|
135
139
|
## 目录结构
|
|
136
140
|
|
|
@@ -159,17 +163,17 @@ JetBrains Mono, released in 2020, focuses on readability for developers. Project
|
|
|
159
163
|
|
|
160
164
|
```mermaid
|
|
161
165
|
graph TD
|
|
162
|
-
A[
|
|
163
|
-
B --> C[生成 WOFF2
|
|
164
|
-
C --> D[将 WOFF2
|
|
166
|
+
A[Font files: SourceHanSansSC / JetBrainsMono] --> B[fontSplit / cn-font-split]
|
|
167
|
+
B --> C[生成 WOFF2 分片与 result.css]
|
|
168
|
+
C --> D[将 WOFF2 分片重命名为 MD5 Base64url 哈希]
|
|
165
169
|
D --> E[重写 CSS 字体族名称与分片路径]
|
|
166
|
-
E --> F[
|
|
170
|
+
E --> F[输出 woff2/t.css、woff2/c.css 与 woff2/_.css]
|
|
167
171
|
```
|
|
168
172
|
|
|
169
|
-
1. **分片处理**:调用 `cn-font-split`
|
|
170
|
-
2.
|
|
171
|
-
3. **样式重写**:解析 CSS
|
|
172
|
-
4. **资源输出**:将 CSS
|
|
173
|
+
1. **分片处理**:调用 `cn-font-split` 工具,将字体切分为 WOFF2 片段。
|
|
174
|
+
2. **哈希映射**:计算分片内容的 MD5 base64url 哈希作为文件名(长度从 4 开始,遇冲突时递增),实现内容寻址。
|
|
175
|
+
3. **样式重写**:解析 CSS,将 font-family 替换为别名(`t` 或 `c`),移除本地路径(`local`)查询,更新字体分片 URL 引用。
|
|
176
|
+
4. **资源输出**:将 CSS 及字体分片写入发布目录 `woff2/`,进行 npm 发布。
|
|
173
177
|
|
|
174
178
|
## 技术堆栈
|
|
175
179
|
|
|
@@ -216,8 +220,8 @@ code {
|
|
|
216
220
|
|
|
217
221
|
## 历史背景
|
|
218
222
|
|
|
219
|
-
|
|
223
|
+
CJK 字体由于文件大(10MB 至 50MB),直接加载会导致白屏或字体闪烁。以往开发多采用系统默认字体,或通过静态抽字工具仅保留部分字词,限制了动态内容展示。
|
|
220
224
|
|
|
221
|
-
2014 年,Adobe 与 Google
|
|
225
|
+
2014 年,Adobe 与 Google 推出 CJK 字体思源黑体(Source Han Sans),但体积问题依旧存在。随着分片技术(如 `cn-font-split`)出现,字体文件能按字符使用频率切分为数百个分片。浏览器按需下载分片,优化了中文字体加载体验。
|
|
222
226
|
|
|
223
|
-
JetBrains Mono 是
|
|
227
|
+
JetBrains Mono 是 2020 年发布的编程字体。`18s` 将思源黑体与 JetBrains Mono 作为可变字体整合分片,为 WebC 提供中文字体支持。
|