fix: put all kinds of system monospace fonts before Courier New (#114)

* fix: put all kinds of system monospace fonts before Courier New

There are multiple issue about Courier New being awful-looking on Linux:

- [Bootstrap](twbs/bootstrap#18609)
- [Chromium](https://issues.chromium.org/issues/40260598)
- [Vue.js Docs](vuejs/docs#3105)

Courier New is only readable under Windows because [ClearType made a special case for it](https://learn.microsoft.com/en-us/archive/blogs/fontblog/why-is-courier-new-so-thin).

Therefore, it should never be one's first choice for monospace font. It should be put at the end of the list.

By the way, though Courier New is a proprietary font, it is available on Linux through [Microsoft's Core Fonts for the Web](https://en.wikipedia.org/wiki/Core_fonts_for_the_Web). That's why Linux users might see it.

In this PR I propose we set the monospace font stack to:

```text
ui-monospace, 'SF Mono', 'SFMono-Regular', Menlo, Monaco, 'Cascadia Mono', Consolas, 'Liberation Mono', 'Noto Sans Mono', 'DejaVu Sans Mono', 'Roboto Mono', 'Courier New', monospace;
```

This puts all kinds of system monospace fonts before Courier New, with some personal preference.

- `ui-monospace` is part of the CSS Fonts Module Level 4, and [only available in Safari for now](https://caniuse.com/extended-system-fonts). The difference between it and `monospace` is that `ui-monospace` aims to match the user's system monospace font, while `monospace` is a generic monospace font that's defined by the browser. So it's better to put it first. It currently defaults to "SF Mono" on macOS.
- "SF Mono" is for macOS users who don't use Safari.
- "SFMono-Regular" is a hack before Apple made "SF Mono" available everywhere (It was only bundled with Xcode and Terminal on first launch).
- Menlo was the macOS default monospace font during 2009-2015.
- Monaco was the macOS default monospace font before Menlo.
- Cascadia Mono is the default monospace font for Windows Terminal. It's widely regarded as a modern replacement for Consolas. Its variant, "Cascadia Code", features programming ligatures. Programming ligatures is a controversial topic, and isn't average-user-friendly in the documentation, so I choose Cascadia Mono here.
- Consolas is the default monospace font in Visual Studio and VS Code. It has been the modern monospace font of choice in Windows since Windows Vista.
- Liberation Mono is the default monospace font in Red Hat Enterprise Linux. It's a metric-compatible replacement for Courier New.
- Noto Sans Mono is the default monospace font in ChromeOS and Fedora 36+.
- DejaVu Sans Mono is a popular choice among Linux distributions. It was the default monospace font in Fedora before v36 and ChromeOS Secure Shell before v73. It's also an inspiration for Menlo.
- Roboto Mono is the default monospace font for Android.
- Source Code Pro is the default monospace font in GNOME.
- Courier New is the web-safe fallback.

I intentionally left out a few system monospace fonts:

- Ubuntu Mono. According to [the user feedback in the StackOverflow design refresh announcement](https://meta.stackexchange.com/questions/364048/we-are-switching-to-system-fonts-on-may-10-2021), Even Ubuntu users don't like it. It's smaller than its sans-serif counterpart, too, which is a notable issue.
- Source Code Pro. It's the default monospace font in GNOME. It's a good UI font, but I doubt it's a good choice for code. It's too wide.

---

As a reference:

GitHub's default:

```text
ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace
```

Tailwind 3.4.13:

```text
ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
```

StackExchange's design refresh in 2021:
<https://meta.stackexchange.com/questions/364048/we-are-switching-to-system-fonts-on-may-10-2021>

* chore: format and add blog link

src/core/styles/variables.css

@@ -145,7 +145,13 @@
   --vt-font-family-base: 'Inter var experimental', 'Inter var', Inter,
     -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
     Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
-  --vt-font-family-mono: Menlo, Monaco, Consolas, 'Courier New', monospace;
+  /**
+    * See <https://haoqun.blog/posts/2024/blogged-pull-requests-monospace/>
+    * for more details on the font selection
+    */
+  --vt-font-family-mono: ui-monospace, 'SF Mono', 'SFMono-Regular', Menlo,
+    Monaco, 'Cascadia Mono', Consolas, 'Liberation Mono', 'Noto Sans Mono',
+    'DejaVu Sans Mono', 'Roboto Mono', 'Courier New', monospace;
 }
 
 /**