SF Mono/SFMono-Regular displays Menlo font, use ui-monospace instead

[saegl5]

Description

Change in index.css:
--fonts-monospace: "SFMono-Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", monospace, var(--fonts-emoji);

To:
--fonts-monospace: ui-monospace, "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", monospace, var(--fonts-emoji);

At least for me, Gitea/Safari cannot find SF Mono or SFMono-Regular, unless I replace either one with ui-monospace.

See visual examples (below).
Also, I reproduced the bug in https://try.gitea.io/huihuiyule/spring-cloud-alibaba under "Add maven dependency."

(For now, I do customize the default theme with :root { --fonts-monospace: ui-monospace, "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", monospace, var(--fonts-emoji) !important; }.)

Screenshots

Visual examples: (edited!)

'SF Mono' or "SFMono-Regular" (Default)	ui-monospace (Changed)
monospaced text is NOT displaying SF Mono	monospaced text is displaying SF Mono

Gitea Version

1.17.3

Can you reproduce the bug on the Gitea demo site?

Yes

Operating System

macOS Ventura 13.0.1

Browser Version

Safari Version 16.1

[silverwind]

This looks like a change we could try. I don't understand the details but https://qwtel.com/posts/software/the-monospaced-system-ui-css-font-stack/ mentions ui-monospace is the only way to get the "SF Mono" typeface to show in a browser. I suspect what you are seeing is actually Menlo.

[saegl5]

@silverwind thank you for following up

correct (re: "ui-monospace is the only way..." and "Menlo")
also, I couldn't put it more succinctly than you did (thank you too)

[gnat]

Enabling this for mac users would be cool- I actually install SFMono on my Ubuntu machines too.

[saegl5]

edited visual examples to help make the issue clearer :)
in the original visual examples, knowing where to focus one's attention was tricky
if one still may not see any differences between Menlo and SF-Mono, compare letters like r and l ("l" as in lima)

(issue is still present in Gitea 1.91.0+)

[silverwind]

According to https://caniuse.com/extended-system-fonts, ui-monospace is only supported by the Safari browser, so I think we ought to keep SFMono-Regular around to support other browsers as well.

Try #24442 which does just that.

[silverwind]

Actually I've removed SFMono-Regular as well. It seems to have been there to support Safari before 13.4, and I think even with it removed, Menlo or Monaco will give an acceptable rendering.

[wxiaoguang]

But there are other OS and browsers ... not sure whether we haven enough confidence to remove some mono fonts.

[silverwind]

Yeah it's a complicated topic. For now I've changed #24442 back to additions only. But eventually we have to remove some legacy fonts, the list can't be seen as append-only 😆.

[saegl5]

@silverwind thanks again for following up