fix bitmap font spacing issue (pixijs#11065)

src/scene/text-bitmap/DynamicBitmapFont.ts

@@ -158,14 +158,15 @@ export class DynamicBitmapFont extends AbstractBitmapFont<DynamicBitmapFont>
             const char = charList[i];
 
             const metrics = CanvasTextMetrics.measureText(char, style, canvas, false);
-            // This is ugly - but italics are given more space so they don't overlap
-            const textureGlyphWidth = Math.ceil((style.fontStyle === 'italic' ? 2 : 1) * metrics.width);
 
             // override the line height.. we want this to be the glyps height
             // not the user specified one.
             metrics.lineHeight = metrics.height;
 
             const width = metrics.width * fontScale;
+            // This is ugly - but italics are given more space so they don't overlap
+            const textureGlyphWidth = Math.ceil((style.fontStyle === 'italic' ? 2 : 1) * width);
+
             const height = (metrics.height) * fontScale;
 
             const paddedWidth = textureGlyphWidth + (padding * 2);

tests/visual/scenes/text/bitmap-text-install.scene.ts

@@ -0,0 +1,36 @@
+import { Assets } from '../../../../src/assets/Assets';
+import { TextStyle } from '../../../../src/scene/text/TextStyle';
+import { BitmapFont } from '../../../../src/scene/text-bitmap/BitmapFont';
+import { BitmapFontManager } from '../../../../src/scene/text-bitmap/BitmapFontManager';
+import { BitmapText } from '../../../../src/scene/text-bitmap/BitmapText';
+
+import type { Container } from '../../../../src/scene/container/Container';
+import type { TestScene } from '../../types';
+
+export const scene: TestScene = {
+    it: 'should render an installed font correctly',
+    create: async (scene: Container) =>
+    {
+        await Assets.load('fonts/outfit.woff2');
+
+        const style = new TextStyle({
+            fontSize: 200,
+            stroke: {
+                width: 18,
+                join: 'round',
+            }
+        });
+
+        BitmapFont.install({
+            name: 'big-outfit',
+            style,
+            chars: BitmapFontManager.NUMERIC,
+        });
+
+        const textBitmap = new BitmapText({ text: 1234, style: { fontFamily: 'big-outfit', fontSize: 50 } });
+
+        textBitmap.anchor = 0.5;
+        textBitmap.position.set(128 / 2);
+        scene.addChild(textBitmap);
+    },
+};