So, I did a lot of digging around for pixel fonts that I could use on my site, sometimes modifying them, sometimes looking for a larger version of the font. The thing that bugs me, though, is that these are not rendered pixel-perfect in my browser. As it turns out, this is due to rendering of vector edges of the font, and fixing them isn't possible with CSS alone. But while browsing around on Neocities, I came across Roxelle and found the page on Web-Safe Pixel Fonts which lists some pixel fonts (Windows-based) that do display pixel-perfect for some reason. (They're all Microsoft system fonts for East Asian languages - a point which will come up again later.)
This is really weird! Why is it that some fonts are pixel perfect? Is this something that can be applied to any font? This is important to me because the listed fonts are MS system fonts - they aren't going to be available to non-Windows users by default, assuming they're going to be rendered similarly aliased on those OSes as well. And also, that's part of the mystery...why only MS system fonts? Is the rendering for these fonts a Windows-specific thing?
The first thing I found while digging into this topic was about TrueType hinting - this is a thing that you can do to fonts to align them more closely with the screen pixel grid. To be honest, I haven't really looked into this, because I figured it wasn't 100% relevant. In any case, using font editing programs like FontForge, you can edit the alignment of font vector lines to sit close to or on pixel boundaries, so that they will render with clarity. This doesn't seem to be an absolute thing though (as it's intended to work with fonts that do have curves, I think), so I don't think this works for pixel fonts by itself.
The second thing was this Stack Overflow question, which links to this blog post from 2010 that appears to have the solution (or at least, the explanation): embedded bitmaps.
Embedded bitmaps are bitmap versions of the font glyphs (characters) that are displayed at certain sizes for readability. An example can be seen in this SO question. These are pixel perfect as they're not rendered from vector curves...so they're exactly what I want to use here, if possible. I don't know if the solution is still relevant, but certain very specific properties need to be set in order for the Windows API to prioritise the embedded bitmaps. (I might look into whether this weird solution is still relevant.) Notably, these properties are related to East Asian languages - this is because the glyphs are denser than the English alphabet and they're less identifiable when blurry, so it's preferable to render them aliased at smaller sizes.
This isn't the solution, though! In searching for more information about embedded bitmaps, I came across this question from 2016 (which also shows that the arcane solution above was still relevant 6 years later...). In the comments (2019), it's mentioned that bitmap-embedded fonts don't work via @font-face in Firefox and Chrome, and only render as intended if the font is installed on the system. This is because Firefox and Chromium don't support the bitmap tables (EBDT/EBLC tables), so they get dropped. This is discussed in greater detail in this post.
So...like...did that get updated sometime in the past 2-3 years? I found a Chromium issue that mentions fonts with embedded bitmaps turning blurry. It got fixed so that they're sharp now. However, this seems to refer to system installed fonts - the webfont issue seems to persist (the example still doesn't work).
Back in the SO post - a proposed solution is given with the link to the GitHub repo of OTS (OpenType Sanitizer), which is the code that (speaking in very broad terms; I'm not an expert here) handles the "cleaning" of OpenType fonts so that they're safe for Chromium/Firefox browsers to render to users. This is where the bitmap tables are dropped - basically, in order to render pixel perfect aliased fonts, the browsers could be changed to request that the bitmap tables be kept (requires convincing the browser programmer communities to do this), or OTS can be modified to keep the bitmap tables. An issue has been opened and a branch made, but it hasn't been updated in over a year (at the time of writing), unfortunately :( It's still fairly recent, so I'm hoping it'll be worked on again. I'd love to help, but I'd need to do a lot more research into font rendering/font files. Incidentally, I didn't find any recent mention of the EBDT/EBLC tables in the Chromium tracker, so I don't think anyone's paying attention to that.
tl;dr Specific East Asian fonts are rendered as bitmap fonts because they contain embedded bitmaps. However, they only render as bitmap fonts in the browser if they're installed as system fonts, because the common browsers (Chromium, Firefox) don't support bitmap font rendering yet. It doesn't seem likely that bitmap font rendering in these browsers will be happening any time soon.
So, it doesn't seem like there's any practical solution besides using the MS system fonts, I guess. (You can't even embed them on a website for non-Windows users, because Microsoft's system font licence doesn't allow this; it costs upwards of $39.99 to license a single such font for web use.) Or maybe offering your pixel fonts for download and recommending them to be installed. This is sort of like, something that I'd love to have found an obscure solution to after researching, but unfortunately anything and everything I've found is imperfect...
In any case, I've dug through Microsoft's list of fonts and my system fonts to find a more or less complete list of pixel perfect fonts (displayed at 16px):
I'm unsure why these are exceptions in the browser when they do render bitmap strikes at certain sizes in Windows applications, but I'm guessing it might have to do with the East Asian language settings mentioned above: