Fonts: consider to set font-display: block. Fixes #131396

microsoft · Aug 23, 2021 · c8209af · c8209af
1 parent 8a0ef41
commit c8209af
Show file tree

Hide file tree

Showing 5 changed files with 5 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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));
 		}