Skip to content

Commit 8096eac

Browse files
tats-utats-u
authored
fix(theme): strip system-ui from font-family-base (#4988)
1 parent cd71695 commit 8096eac

3 files changed

Lines changed: 174 additions & 31 deletions

File tree

‎src/client/theme-default/components/VPHero.vue‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -143,6 +143,11 @@ const { heroImageSlotExists } = inject(
143143
font-size: 32px;
144144
font-weight: 700;
145145
white-space: pre-wrap;
146+
147+
&:lang(ja) {
148+
font-feature-settings: 'palt';
149+
word-break: auto-phrase;
150+
}
146151
}
147152
148153
.VPHero.has-image .name,

‎src/client/theme-default/styles/fonts.css‎

Lines changed: 150 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -150,48 +150,170 @@
150150
U+2215, U+FEFF, U+FFFD;
151151
}
152152

153+
/*
154+
Some code points in Inter are not compatible with CJK languages.
155+
156+
https://www.unicode.org/L2/L2014/14006-sv-western-vs-cjk.pdf
157+
https://www.unicode.org/L2/L2018/18013-svs-proposal.pdf
158+
https://www.unicode.org/L2/L2018/18073-svs-proposal.pdf
159+
https://www.unicode.org/L2/L2023/23212r-quotes-svs-proposal.pdf
160+
161+
https://github.com/w3c/clreq/blob/f837ffe4a5501e72c17bd02961ce1b440916624f/local.css#L4
162+
& U+2015 (similar to U+2014 in Japanese)
163+
164+
All CJK languages: U+00B7, U+2013, U+2014, U+2015, U+2018, U+2019, U+201C, U+201D, U+2026, U+2E3A
165+
zh's request: U+007E (Both are fine in ja because unused there)
166+
zh's request but decision postponed: U+002F (Both are fine in ja; include it into Inter for the time being)
167+
*/
168+
169+
@font-face {
170+
font-family: Inter4CJK;
171+
font-style: normal;
172+
font-weight: 100 900;
173+
font-display: swap;
174+
src: url('../fonts/inter-roman-cyrillic-ext.woff2') format('woff2');
175+
unicode-range:
176+
U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
177+
}
178+
179+
@font-face {
180+
font-family: Inter4CJK;
181+
font-style: normal;
182+
font-weight: 100 900;
183+
font-display: swap;
184+
src: url('../fonts/inter-roman-cyrillic.woff2') format('woff2');
185+
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
186+
}
187+
188+
@font-face {
189+
font-family: Inter4CJK;
190+
font-style: normal;
191+
font-weight: 100 900;
192+
font-display: swap;
193+
src: url('../fonts/inter-roman-greek-ext.woff2') format('woff2');
194+
unicode-range: U+1F00-1FFF;
195+
}
196+
197+
@font-face {
198+
font-family: Inter4CJK;
199+
font-style: normal;
200+
font-weight: 100 900;
201+
font-display: swap;
202+
src: url('../fonts/inter-roman-greek.woff2') format('woff2');
203+
unicode-range:
204+
U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
205+
}
206+
207+
@font-face {
208+
font-family: Inter4CJK;
209+
font-style: normal;
210+
font-weight: 100 900;
211+
font-display: swap;
212+
src: url('../fonts/inter-roman-vietnamese.woff2') format('woff2');
213+
unicode-range:
214+
U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
215+
U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329,
216+
U+1EA0-1EF9, U+20AB;
217+
}
218+
219+
@font-face {
220+
font-family: Inter4CJK;
221+
font-style: normal;
222+
font-weight: 100 900;
223+
font-display: swap;
224+
src: url('../fonts/inter-roman-latin-ext.woff2') format('woff2');
225+
unicode-range:
226+
U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
227+
U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
228+
}
229+
230+
/* Exclude some ambiguous CJK characters. */
231+
@font-face {
232+
font-family: Inter4CJK;
233+
font-style: normal;
234+
font-weight: 100 900;
235+
font-display: swap;
236+
src: url('../fonts/inter-roman-latin.woff2') format('woff2');
237+
unicode-range:
238+
U+0000-007D, U+007F-00B6, U+00B8-00FF, U+0131, U+0152-0153, U+02BB-02BC,
239+
U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-2012, U+2016-2017,
240+
U+201A-201B, U+201E-2025, U+2027-206F, U+2074, U+20AC, U+2122, U+2191,
241+
U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
242+
}
243+
244+
@font-face {
245+
font-family: Inter4CJK;
246+
font-style: italic;
247+
font-weight: 100 900;
248+
font-display: swap;
249+
src: url('../fonts/inter-italic-cyrillic-ext.woff2') format('woff2');
250+
unicode-range:
251+
U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
252+
}
253+
254+
@font-face {
255+
font-family: Inter4CJK;
256+
font-style: italic;
257+
font-weight: 100 900;
258+
font-display: swap;
259+
src: url('../fonts/inter-italic-cyrillic.woff2') format('woff2');
260+
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
261+
}
262+
263+
@font-face {
264+
font-family: Inter4CJK;
265+
font-style: italic;
266+
font-weight: 100 900;
267+
font-display: swap;
268+
src: url('../fonts/inter-italic-greek-ext.woff2') format('woff2');
269+
unicode-range: U+1F00-1FFF;
270+
}
271+
153272
@font-face {
154-
font-family: 'Punctuation SC';
155-
font-weight: 400;
156-
src:
157-
local('PingFang SC Regular'), local('Noto Sans CJK SC'),
158-
local('Microsoft YaHei');
273+
font-family: Inter4CJK;
274+
font-style: italic;
275+
font-weight: 100 900;
276+
font-display: swap;
277+
src: url('../fonts/inter-italic-greek.woff2') format('woff2');
159278
unicode-range:
160-
U+201C, U+201D, U+2018, U+2019, U+2E3A, U+2014, U+2013, U+2026, U+00B7,
161-
U+007E, U+002F;
279+
U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
162280
}
163281

164282
@font-face {
165-
font-family: 'Punctuation SC';
166-
font-weight: 500;
167-
src:
168-
local('PingFang SC Medium'), local('Noto Sans CJK SC'),
169-
local('Microsoft YaHei');
283+
font-family: Inter4CJK;
284+
font-style: italic;
285+
font-weight: 100 900;
286+
font-display: swap;
287+
src: url('../fonts/inter-italic-vietnamese.woff2') format('woff2');
170288
unicode-range:
171-
U+201C, U+201D, U+2018, U+2019, U+2E3A, U+2014, U+2013, U+2026, U+00B7,
172-
U+007E, U+002F;
289+
U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
290+
U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329,
291+
U+1EA0-1EF9, U+20AB;
173292
}
174293

175294
@font-face {
176-
font-family: 'Punctuation SC';
177-
font-weight: 600;
178-
src:
179-
local('PingFang SC Semibold'), local('Noto Sans CJK SC Bold'),
180-
local('Microsoft YaHei Bold');
295+
font-family: Inter4CJK;
296+
font-style: italic;
297+
font-weight: 100 900;
298+
font-display: swap;
299+
src: url('../fonts/inter-italic-latin-ext.woff2') format('woff2');
181300
unicode-range:
182-
U+201C, U+201D, U+2018, U+2019, U+2E3A, U+2014, U+2013, U+2026, U+00B7,
183-
U+007E, U+002F;
301+
U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
302+
U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
184303
}
185304

305+
/* Exclude some ambiguous CJK characters. */
186306
@font-face {
187-
font-family: 'Punctuation SC';
188-
font-weight: 700;
189-
src:
190-
local('PingFang SC Semibold'), local('Noto Sans CJK SC Bold'),
191-
local('Microsoft YaHei Bold');
307+
font-family: Inter4CJK;
308+
font-style: italic;
309+
font-weight: 100 900;
310+
font-display: swap;
311+
src: url('../fonts/inter-italic-latin.woff2') format('woff2');
192312
unicode-range:
193-
U+201C, U+201D, U+2018, U+2019, U+2E3A, U+2014, U+2013, U+2026, U+00B7,
194-
U+007E, U+002F;
313+
U+0000-007D, U+007F-00B6, U+00B8-00FF, U+0131, U+0152-0153, U+02BB-02BC,
314+
U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-2012, U+2016-2017,
315+
U+201A-201B, U+201E-2025, U+2027-206F, U+2074, U+20AC, U+2122, U+2191,
316+
U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
195317
}
196318

197319
/* Generate the subsetted fonts using: `pyftsubset <file>.woff2 --unicodes="<range>" --layout-features+=pnum,tnum --flavor=woff2 --output-file="inter-<style>-<subset>.woff2"` */

‎src/client/theme-default/styles/vars.css‎

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -262,20 +262,36 @@
262262

263263
:root {
264264
--vp-font-family-base:
265-
'Inter', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
265+
'Inter', -apple-system, BlinkMacSystemFont, sans-serif, 'Apple Color Emoji',
266266
'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
267267
--vp-font-family-mono:
268268
ui-monospace, 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono',
269269
'Courier New', monospace;
270270
font-optical-sizing: auto;
271271
}
272272

273-
:root:where(:lang(zh)) {
273+
/* :root and [lang] have the same specificity.
274+
[lang] covers the case of e.g. <div lang="zh-CN"> in a non-Chinese page.
275+
*/
276+
/* Korean compatibility is unverified, so application of custom Inter to Korean is pending. */
277+
[lang]:where(:lang(zh, ja)) {
274278
--vp-font-family-base:
275-
'Punctuation SC', 'Inter', ui-sans-serif, system-ui, sans-serif,
279+
'Inter4zh', -apple-system, BlinkMacSystemFont, sans-serif,
276280
'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
277281
}
278282

283+
[lang]:where(:lang(zh, ja, ko)) {
284+
h1,
285+
h2,
286+
h3,
287+
h4,
288+
h5,
289+
h6,
290+
p {
291+
line-break: strict;
292+
}
293+
}
294+
279295
/**
280296
* Shadows
281297
* -------------------------------------------------------------------------- */

0 commit comments

Comments
 (0)
⚡