From c8209aff4c8495fa936058c9f213abf452ff60f0 Mon Sep 17 00:00:00 2001 From: Martin Aeschlimann Date: Mon, 23 Aug 2021 14:31:07 +0200 Subject: [PATCH] Fonts: consider to set font-display: block. Fixes #131396 --- src/vs/base/browser/ui/codicons/codicon/codicon.css | 1 + src/vs/base/browser/ui/contextview/contextview.ts | 1 + src/vs/platform/theme/browser/iconsStyleSheet.ts | 2 +- src/vs/workbench/services/themes/browser/fileIconThemeData.ts | 2 +- .../workbench/services/themes/browser/productIconThemeData.ts | 2 +- 5 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/vs/base/browser/ui/codicons/codicon/codicon.css b/src/vs/base/browser/ui/codicons/codicon/codicon.css index a0593f7cbff6c..77cc04a1df402 100644 --- a/src/vs/base/browser/ui/codicons/codicon/codicon.css +++ b/src/vs/base/browser/ui/codicons/codicon/codicon.css @@ -5,6 +5,7 @@ @font-face { font-family: "codicon"; + font-display: block; src: url("./codicon.ttf?5d4d76ab2ce5108968ad644d591a16a6") format("truetype"); } diff --git a/src/vs/base/browser/ui/contextview/contextview.ts b/src/vs/base/browser/ui/contextview/contextview.ts index e19cf4390cad5..ee7d7e7646279 100644 --- a/src/vs/base/browser/ui/contextview/contextview.ts +++ b/src/vs/base/browser/ui/contextview/contextview.ts @@ -365,6 +365,7 @@ let SHADOW_ROOT_CSS = /* css */ ` @font-face { font-family: "codicon"; + font-display: block; src: url("./codicon.ttf?5d4d76ab2ce5108968ad644d591a16a6") format("truetype"); } diff --git a/src/vs/platform/theme/browser/iconsStyleSheet.ts b/src/vs/platform/theme/browser/iconsStyleSheet.ts index d586dcc55e514..a255ac5c10ba8 100644 --- a/src/vs/platform/theme/browser/iconsStyleSheet.ts +++ b/src/vs/platform/theme/browser/iconsStyleSheet.ts @@ -53,7 +53,7 @@ export function getIconsStyleSheet(): IIconsStyleSheet { for (let id in usedFontIds) { const fontContribution = usedFontIds[id]; const src = fontContribution.definition.src.map(l => `${asCSSUrl(l.location)} format('${l.format}')`).join(', '); - rules.push(`@font-face { src: ${src}; font-family: ${asCSSPropertyValue(id)}; }`); + rules.push(`@font-face { src: ${src}; font-family: ${asCSSPropertyValue(id)}; font-display: block; }`); } return rules.join('\n'); } diff --git a/src/vs/workbench/services/themes/browser/fileIconThemeData.ts b/src/vs/workbench/services/themes/browser/fileIconThemeData.ts index 89bb26a0488f7..c6881937d3a85 100644 --- a/src/vs/workbench/services/themes/browser/fileIconThemeData.ts +++ b/src/vs/workbench/services/themes/browser/fileIconThemeData.ts @@ -345,7 +345,7 @@ function _processIconThemeDocument(id: string, iconThemeDocumentLocation: URI, i let src = font.src.map(l => `${asCSSUrl(resolvePath(l.path))} format('${l.format}')`).join(', '); cssRules.push(`@font-face { src: ${src}; font-family: '${font.id}'; font-weight: ${font.weight}; font-style: ${font.style}; }`); }); - cssRules.push(`.show-file-icons .file-icon::before, .show-file-icons .folder-icon::before, .show-file-icons .rootfolder-icon::before { font-family: '${fonts[0].id}'; font-size: ${fonts[0].size || '150%'}}`); + cssRules.push(`.show-file-icons .file-icon::before, .show-file-icons .folder-icon::before, .show-file-icons .rootfolder-icon::before { font-family: '${fonts[0].id}'; font-size: ${fonts[0].size || '150%'}; font-display: block; }`); } for (let defId in selectorByDefinitionId) { diff --git a/src/vs/workbench/services/themes/browser/productIconThemeData.ts b/src/vs/workbench/services/themes/browser/productIconThemeData.ts index ad70103365fb9..6f6bddc572ede 100644 --- a/src/vs/workbench/services/themes/browser/productIconThemeData.ts +++ b/src/vs/workbench/services/themes/browser/productIconThemeData.ts @@ -221,7 +221,7 @@ function _processIconThemeDocument(id: string, iconThemeDocumentLocation: URI, i warnings.push(nls.localize('error.fontStyle', 'Invalid font style in font \'{0}\'. Ignoring setting.', font.id)); } - cssRules.push(`@font-face { src: ${src}; font-family: '${fontId}';${fontWeight}${fontStyle} }`); + cssRules.push(`@font-face { src: ${src}; font-family: '${fontId}';${fontWeight}${fontStyle}; font-display: block; }`); } else { warnings.push(nls.localize('error.fontId', 'Missing or invalid font id \'{0}\'. Skipping font definition.', font.id)); }