Utilisation

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);
});

Déclaration du type

ts
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>>;
}

Membres 8

NomTypeRequisDescription
familystringNonThe family a view's fontFamily names; absent for the system font.
weightnumberOui100 to 900, as CSS numbers weights.
italicbooleanNon—
sizenumberOuiThe point size the advances and line height are for; other sizes scale them.
lineHeightnumberOui—
advancesReadonly<Record<string, number>>Oui—
fallbacknumberOuiThe advance of a glyph advances does not list.
kerningReadonly<Record<string, number>>NonWhat the font's kerning adds between two glyphs, by the pair: To is T then o.
Généré depuis les déclarations TypeScript publiques : signatures, props et valeurs par défaut viennent de la source vérifiée, les descriptions de sa JSDoc. Aucune valeur par défaut n'est inventée.