yushanhe/awesome-dsh-plugin
1
0
Fork 0
mirror of https://github.com/awesome-dsh-plugin/awesome-dsh-plugin.git synced 2026-09-28 05:13:14 +08:00
Code Issues Packages Projects Releases Wiki Activity

perf: metric-matched fallback so the Archivo swap moves nothing (#4422)

Browse Source 
With the counters fixed, the top remaining field CLS source is the
webfont swap: h1>TEXT (~266/day) plus the card-grid entries it drags
along - the hero re-wraps when Archivo arrives and every card below
shifts. Preload already exists and cannot help visitors whose first
paint beats the font.

This adds a size-adjusted local fallback so text renders in Arial
occupying exactly Archivo's space while the real font is in flight -
the swap then changes glyphs, not geometry. Inserted after the Archivo
faces in all three templates; "Archivo Fallback" joins --display right
after "Archivo".

The ratio is 111.1% against Arial REGULAR, not the naive ratio against
Arial Bold: local('Arial') grabs only the regular face, and the
synthetic bold browsers apply at weight 800 does not widen advances.
The first attempt (103.9%) went the wrong direction; measurement caught
it, review would not have.

Verified in-browser: 15/15 width x text combinations wrap to identical
heights (0.0px max delta) between fallback and loaded Archivo; residual
unwrapped width delta 0.74% against Segoe/plain-Arial's 3-6%. CJK glyphs
fall through to PingFang/Noto exactly as before - the overrides only
touch the Latin runs that were doing the shifting.
This commit is contained in:
fkysly
2026-09-05 22:28:47 +08:00
committed by GitHub
parent 9dd68e87e4
commit de0b56a2c4
3 changed files with 66 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/detail-template.html
+22 -1
View File
@@ -38,13 +38,34 @@ __HREFLANGS__
src:url(/archivo-latin-ext.woff2) format('woff2');
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* Metric-matched fallback. While Archivo is still in flight, headings render
in this Arial (size-adjusted to Archivo's weight-800 advances - the h1 is
what drives layout) instead of whatever system-ui resolves to, so the swap
changes glyphs, not geometry. On Windows the Segoe UI fallback re-wrapped
the hero and shifted the whole card grid below it - the top remaining CLS
source in field data once the counters were fixed.
The ratio is against Arial REGULAR: local('Arial') grabs only the regular
face, and the synthetic bold the browser applies at weight 800 does not
widen advances. Measured in-browser on heading-length samples: Archivo@800
/ synthetic-bold-Arial = 111.1%; Archivo ascent 88 and descent 21 per
100px em, divided by size-adjust. Verified: identical wrap heights across
15 width x text combinations, residual width delta 0.7%. */
@font-face{
font-family:'Archivo Fallback';
src:local('Arial');
size-adjust:111.1%;
ascent-override:79.2%;
descent-override:18.9%;
line-gap-override:0%;
}
:root{
--paper:#f6f2ea; --paper-2:#efe9dd; --card:#fffdf8; --line:#e0d8c8; --line-2:#cfc5b0;
--ink:#2b2620; --ink-2:#5f574a; --ink-3:#8b8172;
--cinnabar:#c0392b; --cinnabar-deep:#a12f22; --cinnabar-soft:#f7e5e2; --cinnabar-border:#e5c4be;
--on-cinnabar:#ffffff;
--sans:"Inter","SF Pro Text","PingFang SC","Hiragino Sans GB","Noto Sans SC","Microsoft YaHei",system-ui,sans-serif;
--display:"Archivo","Inter","PingFang SC","Noto Sans SC",system-ui,sans-serif;
--display:"Archivo","Archivo Fallback","Inter","PingFang SC","Noto Sans SC",system-ui,sans-serif;
--mono:ui-monospace,"SF Mono","Cascadia Code",Menlo,monospace;
}
@media (prefers-color-scheme: dark){
site/privacy-template.html
+22 -1
View File
@@ -39,13 +39,34 @@ __HREFLANGS__
src:url(/archivo-latin-ext.woff2) format('woff2');
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* Metric-matched fallback. While Archivo is still in flight, headings render
in this Arial (size-adjusted to Archivo's weight-800 advances - the h1 is
what drives layout) instead of whatever system-ui resolves to, so the swap
changes glyphs, not geometry. On Windows the Segoe UI fallback re-wrapped
the hero and shifted the whole card grid below it - the top remaining CLS
source in field data once the counters were fixed.
The ratio is against Arial REGULAR: local('Arial') grabs only the regular
face, and the synthetic bold the browser applies at weight 800 does not
widen advances. Measured in-browser on heading-length samples: Archivo@800
/ synthetic-bold-Arial = 111.1%; Archivo ascent 88 and descent 21 per
100px em, divided by size-adjust. Verified: identical wrap heights across
15 width x text combinations, residual width delta 0.7%. */
@font-face{
font-family:'Archivo Fallback';
src:local('Arial');
size-adjust:111.1%;
ascent-override:79.2%;
descent-override:18.9%;
line-gap-override:0%;
}
:root{
--paper:#f6f2ea; --paper-2:#efe9dd; --card:#fffdf8; --line:#e0d8c8; --line-2:#cfc5b0;
--ink:#2b2620; --ink-2:#5f574a; --ink-3:#8b8172;
--cinnabar:#c0392b; --cinnabar-deep:#a12f22; --cinnabar-soft:#f7e5e2; --cinnabar-border:#e5c4be;
--on-cinnabar:#ffffff;
--sans:"Inter","SF Pro Text","PingFang SC","Hiragino Sans GB","Noto Sans SC","Microsoft YaHei",system-ui,sans-serif;
--display:"Archivo","Inter","PingFang SC","Noto Sans SC",system-ui,sans-serif;
--display:"Archivo","Archivo Fallback","Inter","PingFang SC","Noto Sans SC",system-ui,sans-serif;
--mono:ui-monospace,"SF Mono","Cascadia Code",Menlo,monospace;
}
@media (prefers-color-scheme: dark){
site/template.html
+22 -1
View File
@@ -45,6 +45,27 @@ __HREFLANGS__
src:url(/archivo-latin-ext.woff2) format('woff2');
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* Metric-matched fallback. While Archivo is still in flight, headings render
in this Arial (size-adjusted to Archivo's weight-800 advances - the h1 is
what drives layout) instead of whatever system-ui resolves to, so the swap
changes glyphs, not geometry. On Windows the Segoe UI fallback re-wrapped
the hero and shifted the whole card grid below it - the top remaining CLS
source in field data once the counters were fixed.
The ratio is against Arial REGULAR: local('Arial') grabs only the regular
face, and the synthetic bold the browser applies at weight 800 does not
widen advances. Measured in-browser on heading-length samples: Archivo@800
/ synthetic-bold-Arial = 111.1%; Archivo ascent 88 and descent 21 per
100px em, divided by size-adjust. Verified: identical wrap heights across
15 width x text combinations, residual width delta 0.7%. */
@font-face{
font-family:'Archivo Fallback';
src:local('Arial');
size-adjust:111.1%;
ascent-override:79.2%;
descent-override:18.9%;
line-gap-override:0%;
}
/* ── 纸墨朱砂 · warm paper + modern cards (design B, 2026-08) ── */
:root{
--paper:#f6f2ea; --paper-2:#efe9dd; --card:#fffdf8; --line:#e0d8c8; --line-2:#cfc5b0;
@@ -52,7 +73,7 @@ __HREFLANGS__
--cinnabar:#c0392b; --cinnabar-deep:#a12f22; --cinnabar-soft:#f7e5e2; --cinnabar-border:#e5c4be;
--on-cinnabar:#ffffff;
--sans:"Inter","SF Pro Text","PingFang SC","Hiragino Sans GB","Noto Sans SC","Microsoft YaHei",system-ui,sans-serif;
--display:"Archivo","Inter","PingFang SC","Noto Sans SC",system-ui,sans-serif;
--display:"Archivo","Archivo Fallback","Inter","PingFang SC","Noto Sans SC",system-ui,sans-serif;
--mono:ui-monospace,"SF Mono","Cascadia Code",Menlo,monospace;
}
@media (prefers-color-scheme: dark){