Refactor our font stack by bpasero · Pull Request #99429 · microsoft/vscode

bpasero · 2020-06-05T07:32:03Z

This PR fixes #99428

Following changes are included:

consistently use monaco-monospace-font everywhere and define it for standalone editor too (via 2872e27)
define a shared default font family for programmatic access and adopt it (via 05f2cec)
define system-ui before Ubuntu but after Segoe (via ff69562 and 61214b5) to only change it for Linux distros unless they ship a Segoe font
use the same font rules for different OS and languages in issue reporter and process explorer (via e49f99b)

…tent

…ntrol platform

bpasero · 2020-06-05T07:37:09Z

extensions/markdown-language-features/media/markdown.css


 code {
-	font-family: var(--vscode-editor-font-family, Menlo, Monaco, Consolas, "Droid Sans Mono", "Courier New", monospace, "Droid Sans Fallback");
+	font-family: var(--vscode-editor-font-family, "SF Mono", Monaco, Menlo, Consolas, "Ubuntu Mono", "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace);


@mjbvz please review this change, I tried to adjust this to be our standard monospace font we use in the workbench by combining the rules from our monaco-monospace-font into one

bpasero · 2020-06-05T07:38:17Z

src/vs/code/electron-browser/issue/media/issueReporter.css

-html:lang(zh-Hans) {
-	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe WPC", "Segoe UI", "Noto Sans", "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", "Source Han Sans SC", "Source Han Sans CN", "Source Han Sans", sans-serif;
-}
+/* Font Families (with CJK support) */


@RMacfarlane please review this change, it copies the CSS rule we define for the workbench to have the exact same font stack.

bpasero · 2020-06-05T07:38:25Z

src/vs/code/electron-browser/processExplorer/media/processExplorer.css

-html:lang(zh-Hans) {
-	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe WPC", "Segoe UI", "Noto Sans", "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", "Source Han Sans SC", "Source Han Sans CN", "Source Han Sans", sans-serif;
-}
+/* Font Families (with CJK support) */


@RMacfarlane please review this change, it copies the CSS rule we define for the workbench to have the exact same font stack.

bpasero · 2020-06-05T07:39:06Z

src/vs/code/electron-browser/proxy/auth.html


 		body {
-			font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe WPC", "Segoe UI", "Ubuntu", "Droid Sans", sans-serif;
+			font-family: -apple-system, BlinkMacSystemFont, "Segoe WPC", "Segoe UI", system-ui, "Ubuntu", "Droid Sans", sans-serif;


@joaomoreno @chrmarti note that auth.html does not seem to have a notion of platform, I think it should follow the same structure as process explorer and issue reporter.

bpasero · 2020-06-05T07:39:45Z

src/vs/editor/standalone/browser/standalone-tokens.css

 .monaco-editor {
-	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe WPC", "Segoe UI", "HelveticaNeue-Light", "Ubuntu", "Droid Sans", sans-serif;
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe WPC", "Segoe UI", "HelveticaNeue-Light", system-ui, "Ubuntu", "Droid Sans", sans-serif;
+	--monaco-monospace-font: "SF Mono", Monaco, Menlo, Consolas, "Ubuntu Mono", "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace;


@alexdima fyi this defines the monaco-monospace-font for standalone editor to be a union of the 3 platform specific rules we have in the workbench

👍 Thank you!

bpasero · 2020-06-05T07:41:57Z

src/vs/workbench/contrib/notebook/browser/media/notebook.css

 .monaco-workbench .notebookOverlay .output > div.foreground .output-stream,
 .monaco-workbench .notebookOverlay .output > div.foreground .output-plaintext {
-	font-family: Menlo, Monaco, Consolas, "Droid Sans Mono", "Courier New", monospace, "Droid Sans Fallback";
+	font-family: var(--monaco-monospace-font);


@rebornix fyi this adopts the CSS variable for notebooks

bpasero · 2020-06-05T07:42:19Z

src/vs/workbench/contrib/scm/browser/repositoryPane.ts


 export class RepositoryPane extends ViewPane {
-	private readonly defaultInputFontFamily = 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe WPC", "Segoe UI", "Ubuntu", "Droid Sans", sans-serif';
+	private readonly defaultInputFontFamily = DEFAULT_FONT_FAMILY;


@joaomoreno fyi this uses the platform specific font rules

bpasero · 2020-06-05T07:43:11Z

src/vs/workbench/contrib/update/browser/releaseNotesEditor.ts

 					code {
-						font-family: Menlo, Monaco, Consolas, "Droid Sans Mono", "Courier New", monospace, "Droid Sans Fallback";
-						font-size: 14px;
+						font-family: var(--vscode-editor-font-family);


@mjbvz @joaomoreno fyi this aligns release notes editor with other webviews

bpasero · 2020-06-05T07:44:03Z

src/vs/workbench/contrib/webview/browser/themeing.ts


 		const styles = {
-			'vscode-font-family': 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe WPC", "Segoe UI", "Ubuntu", "Droid Sans", sans-serif',
+			'vscode-font-family': DEFAULT_FONT_FAMILY,


@mjbvz fyi this uses the platform specific rule that is shared

mjbvz · 2020-06-05T20:44:30Z

Webview changes look good to me. Thanks @bpasero!

bpasero added 5 commits June 5, 2020 09:04

fonts - adopt monaco-monospace-font in more places and make it consis…

2872e27

…tent

font - use platform specific fonts in more places

05f2cec

font - move system-ui before Ubuntu font in places where we cannot co…

ff69562

…ntrol platform

font - only use system-ui on Linux

61214b5

fonts - adjust font stack for other windows

e49f99b

bpasero added this to the May 2020 milestone Jun 5, 2020

bpasero self-assigned this Jun 5, 2020

bpasero mentioned this pull request Jun 5, 2020

Use system-ui alias for UI fonts (fixes #10144) #96948

Merged

bpasero commented Jun 5, 2020

View reviewed changes

bpasero merged commit 5880971 into master Jun 5, 2020

bpasero deleted the ben/fonts branch June 5, 2020 08:56

RMacfarlane self-requested a review June 5, 2020 16:29

github-actions bot locked and limited conversation to collaborators Jul 20, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Refactor our font stack#99429

Refactor our font stack#99429
bpasero merged 5 commits intomasterfrom
ben/fonts

bpasero commented Jun 5, 2020 •

edited

Loading

Uh oh!

bpasero Jun 5, 2020

Uh oh!

bpasero Jun 5, 2020

Uh oh!

bpasero Jun 5, 2020

Uh oh!

bpasero Jun 5, 2020

Uh oh!

bpasero Jun 5, 2020

Uh oh!

alexdima Jun 5, 2020

Uh oh!

bpasero Jun 5, 2020

Uh oh!

bpasero Jun 5, 2020

Uh oh!

bpasero Jun 5, 2020

Uh oh!

bpasero Jun 5, 2020

Uh oh!

mjbvz commented Jun 5, 2020

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

bpasero commented Jun 5, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mjbvz commented Jun 5, 2020

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

bpasero commented Jun 5, 2020 •

edited

Loading