Include Segoe UI in font list before YaHei #1390

New Issue

GiteaMirror · 2025-11-02T03:59:06-06:00

GiteaMirror commented

2025-11-02 03:59:06 -06:00

Originally created by @mqudsi on GitHub (Dec 19, 2017).

Microsoft YaHei is the default font used by gitea on Windows PCs, and contains the needed support for non-English characters such as those in the Chinese unicode range. Unfortunately, YaHei is not correctly hinted and results in bad aliasing on Windows machines when rendering English text via DirectWrite/Direct2D (tested with both Edge and Chrome under Windows 10).

The CSS standard actually has a very simple workaround for this, if a font-family stack is provided and any individual character is not found in the first-chosen font, the second in the list is tried only for the characters that are not found, and so on and so forth.

That means that simply changing the CSS declaration in _base.less from

    font-family: "Helvetica Neue", "Microsoft YaHei", Arial, Helvetica, sans-serif !important;

to

    font-family: "Helvetica Neue", "Segoe UI", "Microsoft YaHei", Arial, Helvetica, sans-serif !important;

will result in the browser automatically using Segoe UI (which is wonderfully hinted and has beautiful antialiasing under all browsers and platforms) for characters supported by that font, and Microsoft YaHei when characters outside of Segoe UI's supported range are used.

Here is a screenshot of the default/current Gitea configuration with Microsoft YaHei used for all text:

And here's an example with a mix of Segoe UI and Microsoft YaHei:

In the second screenshot, the Chinese text remains rendered in Microsoft YaHei, but the English text benefits from the well-hinted Segoe UI glyphs.

An additional option (though much less straightforward) that many are not aware of is manually crafting a font face that defines which unicode characters are pulled from which font:

@font-face {
    font-family: AsciiSegoe;
    src: local('Segoe UI'), local('SegoeUI')
    unicode-range: U+00-FF;
}

font-family: "Helvetica Neue", AsciiSegoe, "Microsoft YaHei", Arial, Helvetica, sans-serif !important;

The above would load only basic ASCII characters from Segoe UI, and move on to the next entry in the font-family list for all other characters. Obviously that can be flipped around to load only Chinese characters from YaHei and everything else from the default system font, or however else you wish to configure it.

Originally created by @mqudsi on GitHub (Dec 19, 2017). Microsoft YaHei is the default font used by gitea on Windows PCs, and contains the needed support for non-English characters such as those in the Chinese unicode range. Unfortunately, YaHei is not correctly hinted and results in bad aliasing on Windows machines when rendering English text via DirectWrite/Direct2D (tested with both Edge and Chrome under Windows 10). The CSS standard actually has a very simple workaround for this, if a `font-family` stack is provided and any individual character is not found in the first-chosen font, the second in the list is tried _only for the characters that are not found_, and so on and so forth. That means that simply changing the CSS declaration in `_base.less` from ```css font-family: "Helvetica Neue", "Microsoft YaHei", Arial, Helvetica, sans-serif !important; ``` to ```css font-family: "Helvetica Neue", "Segoe UI", "Microsoft YaHei", Arial, Helvetica, sans-serif !important; ``` will result in the browser automatically using Segoe UI (which is wonderfully hinted and has beautiful antialiasing under all browsers and platforms) for characters supported by that font, and Microsoft YaHei when characters outside of Segoe UI's supported range are used. Here is a screenshot of the default/current Gitea configuration with Microsoft YaHei used for all text: ![all-in-yahei](https://user-images.githubusercontent.com/606923/34177913-f12d7c80-e4ca-11e7-858e-142755046d89.png) And here's an example with a mix of Segoe UI and Microsoft YaHei: ![english-segoe-ui](https://user-images.githubusercontent.com/606923/34177931-fab2ca58-e4ca-11e7-9e0e-2d9fd643db2c.png) In the second screenshot, the Chinese text remains rendered in Microsoft YaHei, but the English text benefits from the well-hinted Segoe UI glyphs. An additional option (though much less straightforward) that many are not aware of is manually crafting a font face that defines which unicode characters are pulled from which font: ```css @font-face { font-family: AsciiSegoe; src: local('Segoe UI'), local('SegoeUI') unicode-range: U+00-FF; } font-family: "Helvetica Neue", AsciiSegoe, "Microsoft YaHei", Arial, Helvetica, sans-serif !important; ``` The above would load only basic ASCII characters from Segoe UI, and move on to the next entry in the font-family list for all other characters. Obviously that can be flipped around to load only Chinese characters from YaHei and everything else from the default system font, or however else you wish to configure it.

GiteaMirror added the type/enhancement label 2025-11-02 03:59:06 -06:00

GiteaMirror closed this issue

2025-11-02 03:59:07 -06:00

GiteaMirror commented

2025-11-02 03:59:08 -06:00

@mqudsi commented on GitHub (Dec 19, 2017):

(note that the screeshots above appear blurry because I took them on a hi-dpi display but images on the web are automatically rendered @1x unless otherwise specified via srcset/etc. However the horrible hinting in the English text rendered with YaHei should be very visible nevertheless.)

@mqudsi commented on GitHub (Dec 19, 2017): (note that the screeshots above appear blurry because I took them on a hi-dpi display but images on the web are automatically rendered @1x unless otherwise specified via srcset/etc. However the horrible hinting in the English text rendered with YaHei should be very visible nevertheless.)

GiteaMirror referenced this issue

2025-11-02 11:56:59 -06:00

[PR #1390] [MERGED] Use whole button (commit graph) as link #15890

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github-starred/gitea#1390