tests.FontFace — Kuito Documentation

Usage

Supply a font face to a layout test.

tsx

// Supply a font face to a layout test.
import { HStack, Text } from 'kuito';
import { assert, render, screen, test, type FontFace } from 'kuito/tests';

// A monospaced face: every glyph 10 points wide at 17 points.
const mono: FontFace = {
  family: 'Menlo',
  weight: 400,
  size: 17,
  lineHeight: 20,
  advances: {},
  fallback: 10,
};

test('an 8-character code is 80 points wide', async () => {
  // In a row, the label is as wide as its text.
  await render(
    <HStack>
      <Text fontFamily="Menlo">AB12CD34</Text>
    </HStack>,
    { fonts: { faces: [mono] } },
  );

  assert.equal(screen.getByText('AB12CD34').frame.width, 80);
});

Type declaration

export interface FontFace {
  /** The family a view's `fontFamily` names; absent for the system font. */
  family?: string;
  /** 100 to 900, as CSS numbers weights. */
  weight: number;
  italic?: boolean;
  /** The point size the advances and line height are for; other sizes scale them. */
  size: number;
  lineHeight: number;
  advances: Readonly<Record<string, number>>;
  /** The advance of a glyph `advances` does not list. */
  fallback: number;
  /** What the font's kerning adds between two glyphs, by the pair: `To` is T then o. */
  kerning?: Readonly<Record<string, number>>;
}

Members 8

Name	Type	Required	Description
`family`	`string`	No	The family a view's `fontFamily` names; absent for the system font.
`weight`	`number`	Yes	100 to 900, as CSS numbers weights.
`italic`	`boolean`	No	—
`size`	`number`	Yes	The point size the advances and line height are for; other sizes scale them.
`lineHeight`	`number`	Yes	—
`advances`	`Readonly<Record<string, number>>`	Yes	—
`fallback`	`number`	Yes	The advance of a glyph `advances` does not list.
`kerning`	`Readonly<Record<string, number>>`	No	What the font's kerning adds between two glyphs, by the pair: `To` is T then o.

Generated from the public TypeScript declarations: signatures, props and defaults come from the checked source, descriptions from its JSDoc. No defaults are invented.