Closed TakWolf closed 7 months ago
Prerequisite: https://github.com/ftsf/nico/pull/114
Now nico use the font png format like this:
But not this:
In case 2, there is 1px alpha border on the bottom and right in glyph rect, but not in case 1.
Actually in nico:
advanceWidth = font.rects["x"].w * scale + scale lineHeight = fontHeight() * scale + scale
The + scale is the charGap and lineGap. (If scale = 1px, the gap is 1px)
+ scale
charGap
lineGap
Generally, the font glyph width include the char gap. It makes sense. For example, the Box Drawing chars They need a compact layout. See: https://ark-pixel-font.takwolf.com/alphabet-10px-monospaced.html
Pixel style fonts usually control this margin themself instead of a layout engine to avoid this issue.
(Opentype font lineGap usually is 0, and advanceWidth include charGap)
https://github.com/TakWolf/nico-font-tool https://github.com/TakWolf/nico-font-tool.python
https://littlelimit.net/misaki.htm https://github.com/TakWolf/ark-pixel-font https://github.com/TakWolf/fusion-pixel-font https://github.com/quiple/galmuri https://diaowinner.itch.io/galmuri-extended
Prerequisite: https://github.com/ftsf/nico/pull/114
Now nico use the font png format like this:
But not this:
What's different?
In case 2, there is 1px alpha border on the bottom and right in glyph rect, but not in case 1.
Actually in nico:
The
+ scale
is thecharGap
andlineGap
. (If scale = 1px, the gap is 1px)What's the problem?
Generally, the font glyph width include the char gap. It makes sense. For example, the Box Drawing chars They need a compact layout. See: https://ark-pixel-font.takwolf.com/alphabet-10px-monospaced.html
Pixel style fonts usually control this margin themself instead of a layout engine to avoid this issue.
(Opentype font lineGap usually is 0, and advanceWidth include charGap)
Font Tools:
https://github.com/TakWolf/nico-font-tool https://github.com/TakWolf/nico-font-tool.python
Demo fonts:
https://littlelimit.net/misaki.htm https://github.com/TakWolf/ark-pixel-font https://github.com/TakWolf/fusion-pixel-font https://github.com/quiple/galmuri https://diaowinner.itch.io/galmuri-extended