标签：#font

Well-structured status lines in vim and shell prompts with version control symbols are a nice quality-of-life improvement. Unfortunately, not all monospace fonts come with the necessary PowerLine glyphs. For example, my favourite font is Operator Mono , and it too doesn’t have PowerLine symbols built in. Thanks to the NerdFonts font patcher , I was able to generate a font variant that has the necessary symbols. I simply ran the tool as a Docker container in my fonts directory: $ mkdir HCo_OperatorMonoSSmNF $ docker run --rm -v $PWD /HCo_OperatorMonoSSm/OpenType:/in \ -v $PWD /HCo_OperatorMonoSSmNF:/out \ nerdfonts/patcher --windows --powerline --powerlineextra Now my spaceship shell prompt sparks even more joy.

getComputedStyle(element).fontFamily returns the CSS declaration: "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", sans-serif . That's not the font that rendered. It's a priority list. The browser picks the first one that's available and contains a glyph for the character being rendered. For Latin text, this distinction usually doesn't matter — Windows, macOS, and Linux have converged on a small set of common system fonts. For Japanese, it matters enormously. The visual weight, stroke contrast, and letterform style of Hiragino, Yu Gothic, and Noto Sans JP are genuinely different. A site designed on macOS (where Hiragino is the system Japanese font) looks different on Windows (where Yu Gothic is the fallback). Here's how to figure out what's actually rendering, and what I learned building Japanese Font Finder to automate it. Why getComputedStyle Doesn't Answer the Question getComputedStyle(el).fontFamily gives you the cascade result — what the browser received after applying all CSS rules. But it doesn't tell you which entry in the stack was selected. The underlying question is: does this font exist on this system, and does it have a glyph for this specific character? For Japanese, both conditions matter. A font might exist on the system but only cover a subset of kanji (common with CJK fonts that split across multiple files). The browser will use that font for characters it covers, and fall back for others. Canvas-Based Font Detection The classical technique uses a <canvas> element to measure text rendered with each font in the stack: function getFallbackWidth ( canvas , char ) { const ctx = canvas . getContext ( ' 2d ' ); ctx . font = `16px monospace` ; // known-available baseline return ctx . measureText ( char ). width ; } function testFont ( fontName , char ) { const canvas = document . createElement ( ' canvas ' ); const ctx = canvas . getContext ( ' 2d ' ); ctx . font = `16px " ${ fontName } ", monospace` ; return ctx . measureText ( char ). width ; }