Verwendung

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

Typdeklaration

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

Mitglieder 8

NameTypErforderlichBeschreibung
familystringNeinThe family a view's fontFamily names; absent for the system font.
weightnumberJa100 to 900, as CSS numbers weights.
italicbooleanNein—
sizenumberJaThe point size the advances and line height are for; other sizes scale them.
lineHeightnumberJa—
advancesReadonly<Record<string, number>>Ja—
fallbacknumberJaThe advance of a glyph advances does not list.
kerningReadonly<Record<string, number>>NeinWhat the font's kerning adds between two glyphs, by the pair: To is T then o.
Generiert aus den öffentlichen TypeScript-Deklarationen: Signaturen, Props und Standardwerte stammen aus der geprüften Quelle, Beschreibungen aus deren JSDoc. Kein Standardwert ist erfunden.