admin
5b9c6b5fa1
下游回饋之字型樹需求。決策：字型屬消費端領域，聚珍不應內建字型堆疊（原 _lang.css
之 Noto 後備係越權，且曾蓋掉消費端字型釀 bug）。採「完全移除、交消費端 CSS」（A 案），
否決「以參數管字型」（B 案——JS 管字型須注入 CSS、違反 JS 注入結構／CSS 給視覺之分工；
而缺 halt 字型須逐字型微調 margin 之指引，由既有 jiya.halfWidth／jiya.bias ＋文檔承擔）。
移除：
- 刪 src/css/_lang.css，juzhen.css 移除其 @import。dist/juzhen.css 現零 font-family
規則（3.1→2.5kb）。
聚珍保留之三項非管理性本分（確保不礙消費端字型與 locl）：
- _normalize.css `jz-* { font: inherit }`：原子繼承消費端字型、不強加。
- _jiya.css 半形 font-feature-settings 顯式改 "locl" 1, "halt" 1（預設＋halt-island 兩
處）：確保泛 CJK 字型（思源／Noto CJK）之地域標點字形不因設 halt 而失。
- render 只讀不改 lang。body 文本之 locl 全由消費端字型＋正確 lang 決定。
驗證（真實 Chromium）：
- halt 模式：消費端逐 lang 字型生效並繼承至 jz-inner，無強制 Noto。
- margin 後備：半形盒 0.5em、字身依墨色偏側位移正確、jz-inner 繼承消費端字型、
feature normal（locl 既定開），皆不受字型移除影響。
- demo/index.html、resize-check.html 改示範「消費端逐 lang 設 font-family」之推薦範式；
fallback.html 更新註解。
- README 新增「字型與 locl」節＋改寫 CSS 基礎設定字型項；ARCHITECTURE §6.9 改寫
（A 案決策、否決 B 案、三項本分）＋檔案樹。
- test：新增 CSS 回歸（不內建 font-family、半形保留 locl）。57 測試通過。
- dist/ 重建（僅 juzhen.css 變動，JS 不變）。
85 lines
4.3 KiB
HTML
85 lines
4.3 KiB
HTML
<!doctype html>
|
||
<html lang="zh-Hans">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>聚珍 — halt 缺失字型之 margin 後備模式（方正書宋 GBK）</title>
|
||
<link rel="stylesheet" href="../dist/juzhen.css">
|
||
<style>
|
||
/* 全頁強制使用 方正書宋 GBK（本機字型，無 OpenType halt），以測試後備模式。 */
|
||
body
|
||
{
|
||
margin: 0;
|
||
padding: 2rem;
|
||
background: #fafafa;
|
||
color: #1a1a1a;
|
||
font-family: system-ui, sans-serif;
|
||
}
|
||
/* 字型類獨立於 .juzhen：A 用裸 .cn（瀏覽器原生排版），B／C 才掛 .juzhen
|
||
（含 normalize 之 text-spacing-trim:space-all）。否則 A 之原生標點被 space-all
|
||
撐開、顯得比 B 鬆，造成「B 似乎有效」之假象（實則 B 全形未擠、與真原文等寬）。 */
|
||
/* 字型設於容器即可——聚珍不管字型（無 _lang.css）、亦不強制 jz-inner（`font:
|
||
inherit`），故消費端字型經繼承正確套到標點字面（標點亦以 FZShuSong 渲染，halt
|
||
確實缺席）。此即「字型由消費端負責」之示例。 */
|
||
.cn { font-family: "方正书宋_GBK", "FZShuSong-Z01", serif; font-size: 46px; line-height: 1.5; }
|
||
.w { font-weight: 400; opacity: .85; }
|
||
h1 { font-size: 1rem; }
|
||
.meta { font-size: .72rem; color: #777; line-height: 1.7; max-width: 42em; }
|
||
.meta code { background: #eee; padding: 0 .25em; border-radius: 3px; }
|
||
.row { margin: .6rem 0; }
|
||
.tag { display: inline-block; font-size: .62rem; color: #fff; padding: .12rem .55rem; border-radius: 3px; letter-spacing: .03em; vertical-align: top; margin-top: .9rem; width: 7.5rem; }
|
||
.tag.raw { background: #555; }
|
||
.tag.bad { background: #c0392b; }
|
||
.tag.good { background: #27ae60; }
|
||
/* 把每行的 <p> 設為 inline-block + 背景，行盒寬度即直接反映擠壓效果。 */
|
||
.row p
|
||
{
|
||
display: inline-block;
|
||
margin: 0 0 0 .6rem;
|
||
padding: .15rem .1rem;
|
||
background: #fff;
|
||
border: 1px solid #e0e0e0;
|
||
white-space: nowrap;
|
||
vertical-align: top;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<h1>方正書宋 GBK · margin 後備模式</h1>
|
||
<p class="meta">
|
||
此字型僅含 <code>vert</code>、<b>無 <code>halt</code></b>，故 halt 模式之開明式擠壓「完全無效」（標點仍佔全形）。
|
||
margin 後備模式以負 margin 依字形偏側收半形——本字型簡體點號（，、。；：！？）墨色皆偏左下，故收右側空白。
|
||
白底行盒寬度即直接反映效果：B 與 A 同寬（未擠），C 明顯窄一截（已擠）。
|
||
</p>
|
||
|
||
<div class="row">
|
||
<span class="tag raw" id="tag-raw">A · 原文（瀏覽器原生）</span>
|
||
<div class="cn" id="raw" lang="zh-Hans" style="display:inline-block"><p>他问：“真的吗？”第一、第二、第三；（含括号）。</p></div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<span class="tag bad" id="tag-halt">B · halt 模式<br>（無 halt → 不擠，等同原文）</span>
|
||
<div class="cn juzhen" id="halt" lang="zh-Hans" style="display:inline-block"><p>他问：“真的吗？”第一、第二、第三；（含括号）。</p></div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<span class="tag good" id="tag-margin">C · margin 後備<br>（半形生效）</span>
|
||
<div class="cn juzhen" id="margin" lang="zh-Hans" style="display:inline-block"><p>他问：“真的吗？”第一、第二、第三；（含括号）。</p></div>
|
||
</div>
|
||
|
||
<script src="../dist/juzhen.iife.js"></script>
|
||
<script>
|
||
var base = { spacing: false, jinze: false, longWord: false };
|
||
// B：halt 模式（預設）——此字型無 halt，開明式擠壓不生效（對照組）。
|
||
Juzhen.createJuzhen(Object.assign({ scope: { include: "#halt" } }, base))
|
||
.render(document.getElementById("halt"));
|
||
// C：margin 後備模式——render 於 root 設 data-jz-halfwidth="margin"。
|
||
Juzhen.createJuzhen(Object.assign({ scope: { include: "#margin" }, jiya: { halfWidth: "margin" } }, base))
|
||
.render(document.getElementById("margin"));
|
||
// A 面板留原文（不 render）。
|
||
// 註：margin 模式以 width:0.5em＋字身溢出定位，標點 advance 真為 0.5em；整句
|
||
// 行寬 halt 24.0em → margin 19.5em（10 標點各收 0.5em），可於瀏覽器 devtools 量。
|
||
</script>
|
||
</body>
|
||
</html>
|