Use proper font family for East Asian languages (CJK)

[be5invis]

• VSCode Version: 1.0
• OS Version: Windows 10 x64 1511

Electron assigns a serif font, SimSun, as the default sans-serif font for zh-CN. This is extremely inconsistent.

A workaround may be

whatever:lang(zh-CN) {
    font-family: <your current setting>, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC", sans-serif;
}
whatever:lang(zh-TW) {
    font-family: <your current setting>, "PingFang TC", "Microsoft JhengHei", "Source Han Sans TC", sans-serif;
}

[jackqq]

Hi @be5invis, I guess you have either installed additional fonts (such as Monaco) or modified the FontSubstitutes registry settings or so. I have the default font set and VSCode falls back to Consolas in the editing area. It looks OK.

However, in the explorer area the text looks a little blurry, but can be fixed by increasing the font-size to 12px. Please note the difference between two Chinese lines in the image below, 资源管理器 (original) and 工作文件 (up-sized to 12px). I guess it's because at 12px SimSun performs well with raster glyphs instead of vector ones, which can be quite blurry at small sizes.

[be5invis]

@jackqq The edit area uses Inziu Iosevka SC. What I am talking about is the font used in the UI, instead of the editing area, since it is configurable, and you can actually set to ANY fallback sequence you want.

[dbaeumer]

@bpasero I move this to you. If we should set different fonts in the explorer depending on the UI language you can use the API vs/base/common/platform#language to know the languge used for the UI.

[bpasero]

@dbaeumer the original bug report is about the editor though? if there are multiple issues discussed in here I suggest to split them up by topic.

[be5invis]

@bpasero This issue has no relationship with the editor. It's just the “UI”. Actually we can specify the fallback sequence for the editor.

[bpasero]

@be5invis in your screenshot, you say the font in the explorer is broken? it looks good to me.

[bpasero]

@be5invis can you try the workaround you describe to see if it helps?

[be5invis]

@bpasero The Latin fonts are OK, but focus on the “工作目录” and “资源管理器”. They are in consistent with the Latin one (which is Segoe UI). And I think this is related to #4433.

[be5invis]

@bpasero

[bpasero]

@be5invis does it work adding those other fonts you mentioned in your comment?

[be5invis]

@bpasero If I manually add fonts to .monaco-shell using the dev tool then yes, it works.

[bpasero]

@be5invis ok thanks!

[Tyriar]

@dbaeumer is lang on html going to be set to the correct language in #3841 ? It would be nice to utilize the :lang pseudo-class for this as mentioned in #5260 (comment)

[bpasero]

I would appreciate if people could tell the font-family to use for Japanese as well. I like the idea of connecting this with the lang attribute on the root element.

[be5invis]

@bpasero That's exactly what I suggested.

.monaco-shell:lang(zh-CN){
    font-family: ...; /* Chinese fallback sequence*/
}
.monaco-shell:lang(ja){
    font-family: ...; /* Japanese fallback sequence */
}

[be5invis]

@bpasero Hold on i am installing

[be5invis]

@bpasero It works (at least for Simplified Chinese).

[bpasero]

Ok nice.

[anyong]

I will check zh-Hant-TW later.
On Apr 21, 2016 6:42 PM, "Belleve Invis" notifications@github.com wrote:

[image: image]
https://cloud.githubusercontent.com/assets/240091/14706356/a0bb9e70-07f0-11e6-824f-bb04aa237e87.png
@bpasero https://github.com/bpasero It works (at least for Simplified
Chinese).

—
You are receiving this because you were mentioned.
Reply to this email directly or view it on GitHub
#5260 (comment)

[anyong]

Everything looks fine here 👍

[ghost]

@bpasero Don't use PingFang / Noto Sans / Source Hans on Windows, oe adjust fonts order.

If user install those fonts on Windows will cause text blur and difficult to read.

[bpasero]

@arianelu so you say there should be a different order of font-families depending on the OS? or could we do this all in one CSS declaration (preferred).

[espresso3389]

On Japanese environment, the new build looks fine on OS X and Windows.

[be5invis]

@arianelu I don't think most Windows users will install PingFang, except for font enthusiasts. In the CSS I suggested, the Source Han Sans family is placed after Windows fonts.

[ghost]

@bpasero

I think this one is best for zh-cn:

"Segoe WPC", "Segoe UI", "SFUIText-Light", "HelveticaNeue-Light", "Noto Sana", "Microsoft Yahei UI", "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", "Source Han Sans SC", "Source Han Sans CN", "Source Han Sans", "WenQuanYi MicroHei" ,sans-serif

YaHei UI available in Win8+, may better than YaHei
WenQuanYi MicroHei is for CentOS/SUSE, better than use UKai(i dont know why it will be set as default font of sans-serif in some linux)

If linux/mac user installed YaHei, text still beautiful and clear, but other font is not clear/blur on Windows(except hi-dpi)

[anyong]

@bpasero @arianelu It's fine with Noto Sans, the CJK fonts are called different names (i.e. Noto Sans CJK SC, Noto Sans CJK TC and so on). I have these Noto Sans CJK fonts installed on my computer (Win 10 + zh-Hant-TW locale) and the UI font being displayed is Jhenghei as expected.

[be5invis]

@anyong My stylesheets does not contain Noto Sans CJK. For Source Han Sans, it is after Windows fonts so on Windows it will not be used (and most users will not install them).

[ghost]

@be5invis

I have installed PingFang and Noto Sans, they are blur on my screen.

For other os, because of copyright, only few user installed YaHei, adjust fonts order will not cause any bad change

EDIT: Noto Sans is ok, so, just keep it at origin place, adjust other?

[grazies]

Cool

YOTOV LIMITED[😏]

---

From: ArianeLu notifications@github.com
Sent: 21 April 2016 17:23
To: Microsoft/vscode
Subject: Re: [Microsoft/vscode] Use proper font family for East Asian languages (CJK) (#5260)

@bpaserohttps://github.com/bpasero

I think this one is best for zh-cn:

"Segoe WPC", "Segoe UI", "SFUIText-Light", "HelveticaNeue-Light", "Microsoft Yahei UI", "Microsoft YaHei", "Noto Sans", "PingFang SC", "Hiragino Sans GB", "Source Han Sans SC", "Source Han Sans CN", "Source Han Sans", "WenQuanYi MicroHei" ,sans-serif

YaHei UI available in Win8+, may better than YaHei
WenQuanYi MicroHei is for CentOS/SUSE, better than use UKai(i dont know why it will be set as default font of sans-serif in some linux)

If linux/mac user installed YaHei, text still beautiful and clear, but other font is not clear/blur on Windows(except hi-dpi)

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHubhttps://github.com//issues/5260#issuecomment-212994006

[anyong]

@arianelu You have Noto Sans (a latin alphabet font) listed after the CJK fonts - that doesn't make any sense. Latin fonts should come first, because the latin characters in CJK fonts are notoriously bad.

[be5invis]

@arianelu Your problem is caused by PingFang, not Noto.
And you forgot Office for Mac.

[ghost]

@be5invis So, We just need add Microsoft YaHei UI, WenQuanYi, and move PingFang?

Good night , everyone in Asia(UTC+8, 0:36)

[be5invis]

@arianelu @bpasero
Hmmm, maybe rearrangement is acceptable, since the original CSS's Latin part is also in the "Windows -- OSX -- Linux" order. So this:

• For zh-CN : font-family: "Segoe WPC", "Segoe UI", "SFUIText-Light", "HelveticaNeue-Light", "Noto Sans", "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", "Source Han Sans SC", "Source Han Sans CN", "Source Han Sans", sans-serif
• For zh-TW : font-family: "Segoe WPC", "Segoe UI", "SFUIText-Light", "HelveticaNeue-Light", "Noto Sans", "Microsoft Jhenghei", "PingFang TC", "Source Han Sans TC", "Source Han Sans", "Source Han Sans TW", sans-serif
• For ja : font-family: "Segoe WPC", "Segoe UI", "SFUIText-Light", "HelveticaNeue-Light", "Noto Sans", "Meiryo", "Hiragino Kaku Gothic Pro", "Source Han Sans J", "Source Han Sans JP", "Source Han Sans", "Sazanami Gothic", "IPA Gothic", sans-serif
• For ko : font-family: "Segoe WPC", "Segoe UI", "SFUIText-Light", "HelveticaNeue-Light", "Noto Sans", "Malgun Gothic", "Nanum Gothic", "Dotom", "Apple SD Gothic Neo", "AppleGothic", "Source Han Sans K", "Source Han Sans JR", "Source Han Sans", "UnDotum", "FBaekmuk Gulim", sans-serif

is acceptable either.

[bpasero]

@be5invis I am relying on you guys telling me the best option. I can make such a change in the font-family list easily tomorrow.

[bpasero]

Pushed the suggestion from #5260 (comment)

[aeschli]

I verified that for the explorer we now use a 'zh-Hans' specific font.