generateFontFace() — astro Function Reference

Architecture documentation for the generateFontFace() function in capsize-font-metrics-resolver.ts from the astro codebase.

Function typescript CoreAstro RenderingEngine calls 1

Entity Profile

CoreAstro→ RenderingEngine→ generateFontFace() — astro Function Reference

Dependency Diagram

graph TD
  3173d990_3668_518a_8ebe_a502a9890f7d["generateFontFace()"]
  830447a8_2868_0945_29b2_fb4acb94f9e8["CapsizeFontMetricsResolver"]
  3173d990_3668_518a_8ebe_a502a9890f7d -->|defined in| 830447a8_2868_0945_29b2_fb4acb94f9e8
  4c683d42_cf2f_0633_85e1_cb5e231c5e22["toPercentString()"]
  3173d990_3668_518a_8ebe_a502a9890f7d -->|calls| 4c683d42_cf2f_0633_85e1_cb5e231c5e22
  style 3173d990_3668_518a_8ebe_a502a9890f7d fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/astro/src/assets/fonts/infra/capsize-font-metrics-resolver.ts lines 58–107

	generateFontFace({
		metrics,
		fallbackMetrics,
		name: fallbackName,
		font: fallbackFontName,
		properties,
	}: {
		metrics: FontFaceMetrics;
		fallbackMetrics: FontFaceMetrics;
		name: string;
		font: string;
		properties: CssProperties;
	}): string {
		// Calculate size adjust
		const preferredFontXAvgRatio = metrics.xWidthAvg / metrics.unitsPerEm;
		const fallbackFontXAvgRatio = fallbackMetrics.xWidthAvg / fallbackMetrics.unitsPerEm;

		const sizeAdjust =
			preferredFontXAvgRatio && fallbackFontXAvgRatio
				? preferredFontXAvgRatio / fallbackFontXAvgRatio
				: 1;

		const adjustedEmSquare = metrics.unitsPerEm * sizeAdjust;

		// Calculate metric overrides for preferred font
		const ascentOverride = metrics.ascent / adjustedEmSquare;
		const descentOverride = Math.abs(metrics.descent) / adjustedEmSquare;
		const lineGapOverride = metrics.lineGap / adjustedEmSquare;

		// Calculate metric overrides for fallback font
		const fallbackAscentOverride = fallbackMetrics.ascent / adjustedEmSquare;
		const fallbackDescentOverride = Math.abs(fallbackMetrics.descent) / adjustedEmSquare;
		const fallbackLineGapOverride = fallbackMetrics.lineGap / adjustedEmSquare;

		return this.#cssRenderer.generateFontFace(fallbackName, {
			...properties,
			src: renderFontSrc([{ name: fallbackFontName }]),
			'size-adjust': sizeAdjust && sizeAdjust !== 1 ? toPercentString(sizeAdjust) : undefined,
			'ascent-override':
				ascentOverride && ascentOverride !== fallbackAscentOverride
					? toPercentString(ascentOverride)
					: undefined,
			'descent-override':
				descentOverride && descentOverride !== fallbackDescentOverride
					? toPercentString(descentOverride)
					: undefined,
			'line-gap-override':
				lineGapOverride !== fallbackLineGapOverride ? toPercentString(lineGapOverride) : undefined,
		});
	}