font-stretch : The Font Stretch Property
Summary
The font-stretch property selects a normal, condensed, or expanded face from a font. This property is currently recognized by Scryber.Core but not applied during PDF rendering. It is included for CSS compatibility and future enhancement.
Usage
/* Keyword values */
font-stretch: normal;
font-stretch: ultra-condensed;
font-stretch: extra-condensed;
font-stretch: condensed;
font-stretch: semi-condensed;
font-stretch: semi-expanded;
font-stretch: expanded;
font-stretch: extra-expanded;
font-stretch: ultra-expanded;
/* Percentage values (CSS3) */
font-stretch: 50%;
font-stretch: 100%;
font-stretch: 200%;
Values
Keyword Values
- ultra-condensed - Most condensed variant (50%)
- extra-condensed - Extra condensed variant (62.5%)
- condensed - Condensed variant (75%)
- semi-condensed - Slightly condensed variant (87.5%)
- normal - Normal width (100%) - default
- semi-expanded - Slightly expanded variant (112.5%)
- expanded - Expanded variant (125%)
- extra-expanded - Extra expanded variant (150%)
- ultra-expanded - Most expanded variant (200%)
Percentage Values
- 50% - 200% - Numeric representation of stretch values
- 100% - Equivalent to normal
Notes
- This property is currently not implemented in Scryber.Core
- The CSS parser recognizes the property but skips to the next attribute without applying changes
- No visual effect will be seen when this property is applied to PDF elements
- Included for CSS compatibility and potential future implementation
- Standard CSS font-stretch requires fonts to have multiple width variants
- Most common fonts do not include condensed or expanded variants
- Future versions may implement this feature if font width variants become more widely available
Data Binding
CSS properties support dynamic values through Scryber’s Handlebars-style data binding syntax using `` in inline styles. While font-stretch is not currently implemented in Scryber.Core, the data binding syntax is supported for future compatibility.
Binding Syntax
Data binding expressions are enclosed in double curly braces `` and can reference:
- Model properties: ``
- Nested data: ``
- Conditional expressions: ``
Data Binding Examples
<!-- Dynamic stretch from model (no effect until implemented) -->
<div style="font-stretch: ">
Text with bound font-stretch value
</div>
<!-- Conditional stretch based on layout (no effect until implemented) -->
<div style="font-stretch: ">
<h1 id="font-size--the-font-size-property">font-size : The Font Size Property</h1>
<p>Summary</p>
<p>The <code class="language-plaintext highlighter-rouge">font-size</code> property sets the size of text in PDF documents. It accepts absolute length values (points, pixels, etc.) or predefined keyword values that map to specific point sizes. Font size is fundamental to text rendering and affects the visual hierarchy and readability of PDF content.</p>
<h2 id="usage">Usage</h2>
<div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c">/* Absolute units */</span>
<span class="nt">font-size</span><span class="o">:</span> <span class="err">12</span><span class="nt">pt</span><span class="o">;</span>
<span class="nt">font-size</span><span class="o">:</span> <span class="err">16</span><span class="nt">px</span><span class="o">;</span>
<span class="nt">font-size</span><span class="o">:</span> <span class="err">1</span><span class="o">.</span><span class="err">2</span><span class="nt">em</span><span class="o">;</span>
<span class="nt">font-size</span><span class="o">:</span> <span class="err">2</span><span class="nt">rem</span><span class="o">;</span>
<span class="c">/* Keyword values */</span>
<span class="nt">font-size</span><span class="o">:</span> <span class="nt">medium</span><span class="o">;</span>
<span class="nt">font-size</span><span class="o">:</span> <span class="nt">large</span><span class="o">;</span>
<span class="nt">font-size</span><span class="o">:</span> <span class="nt">x-small</span><span class="o">;</span>
</code></pre></div></div>
<hr />
<h2 id="values">Values</h2>
<h3 id="predefined-keywords">Predefined Keywords</h3>
<ul>
<li><strong>xx-small</strong> - 6pt - Extra extra small text</li>
<li><strong>x-small</strong> - 8pt - Extra small text</li>
<li><strong>small</strong> - 10pt - Small text</li>
<li><strong>medium</strong> - 12pt - Medium/normal text (default)</li>
<li><strong>large</strong> - 16pt - Large text</li>
<li><strong>x-large</strong> - 24pt - Extra large text</li>
<li><strong>xx-large</strong> - 32pt - Extra extra large text</li>
</ul>
<h3 id="absolute-units">Absolute Units</h3>
<ul>
<li><strong>pt (points)</strong> - Standard typographic unit (1pt = 1/72 inch): <code class="language-plaintext highlighter-rouge">12pt</code>, <code class="language-plaintext highlighter-rouge">14pt</code></li>
<li><strong>px (pixels)</strong> - Pixel units: <code class="language-plaintext highlighter-rouge">16px</code>, <code class="language-plaintext highlighter-rouge">20px</code></li>
<li><strong>in (inches)</strong> - Inches: <code class="language-plaintext highlighter-rouge">0.5in</code></li>
<li><strong>cm (centimeters)</strong> - Centimeters: <code class="language-plaintext highlighter-rouge">1cm</code></li>
<li><strong>mm (millimeters)</strong> - Millimeters: <code class="language-plaintext highlighter-rouge">10mm</code></li>
</ul>
<h3 id="relative-units">Relative Units</h3>
<ul>
<li><strong>em</strong> - Relative to parent element’s font size: <code class="language-plaintext highlighter-rouge">1.5em</code>, <code class="language-plaintext highlighter-rouge">0.8em</code></li>
<li><strong>rem</strong> - Relative to root element’s font size: <code class="language-plaintext highlighter-rouge">1.2rem</code></li>
<li><strong>% (percentage)</strong> - Percentage of parent’s font size: <code class="language-plaintext highlighter-rouge">120%</code>, <code class="language-plaintext highlighter-rouge">80%</code></li>
</ul>
<h3 id="expression-support">Expression Support</h3>
<ul>
<li><strong>calc()</strong> - Calculate font size: <code class="language-plaintext highlighter-rouge">calc(12pt + 2pt)</code></li>
<li><strong>var()</strong> - Use CSS variables: <code class="language-plaintext highlighter-rouge">var(--base-font-size)</code></li>
</ul>
<h3 id="unsupported-values">Unsupported Values</h3>
<ul>
<li><strong>larger</strong> - Recognized but not applied</li>
<li><strong>smaller</strong> - Recognized but not applied</li>
</ul>
<hr />
<h2 id="notes">Notes</h2>
<ul>
<li>Points (pt) are the recommended unit for PDF generation as they map directly to print measurements</li>
<li>The default font size is typically 12pt (medium)</li>
<li>Relative units (em, rem, %) are calculated based on parent or root font sizes</li>
<li>Keywords provide consistent sizing across documents</li>
<li>Font size affects line height calculations when using relative line-height values</li>
<li>Very small font sizes (below 6pt) may reduce readability in printed PDFs</li>
<li>Expression binding is supported for dynamic font sizing</li>
</ul>
<hr />
<h2 id="data-binding">Data Binding</h2>
<p>CSS properties support dynamic values through Scryber’s Handlebars-style data binding syntax using `` in inline styles. This enables font-size to be determined dynamically based on model data, user preferences, or document requirements.</p>
<h3 id="binding-syntax">Binding Syntax</h3>
<p>Data binding expressions are enclosed in double curly braces `` and can reference:</p>
<ul>
<li>Model properties: ``</li>
<li>Nested data: ``</li>
<li>Conditional expressions: ``</li>
</ul>
<h3 id="data-binding-examples">Data Binding Examples</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Dynamic font size from model --></span>
<span class="nt"><p</span> <span class="na">style=</span><span class="s">"font-size: pt"</span><span class="nt">></span>
Text sized according to customer preference
<span class="nt"></p></span>
<span class="c"><!-- Conditional sizing based on importance --></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"font-size: "</span><span class="nt">></span>
<span class="nt"></div></span>
<span class="c"><!-- Responsive sizing for different document sections --></span>
<span class="nt"><body></span>
<span class="nt"><h1</span> <span class="na">style=</span><span class="s">"font-size: pt"</span><span class="nt">></span>
<span class="nt"></h1></span>
<span class="nt"><h2</span> <span class="na">style=</span><span class="s">"font-size: pt"</span><span class="nt">></span>
<span class="nt"></h2></span>
<span class="nt"><p</span> <span class="na">style=</span><span class="s">"font-size: pt"</span><span class="nt">></span>
<span class="nt"><h1</span> <span class="na">id=</span><span class="s">"font-family--the-font-family-property"</span><span class="nt">></span>font-family : The Font Family Property<span class="nt"></h1></span>
<span class="nt"><p></span>Summary<span class="nt"></p></span>
<span class="nt"><p></span>The <span class="nt"><code</span> <span class="na">class=</span><span class="s">"language-plaintext highlighter-rouge"</span><span class="nt">></span>font-family<span class="nt"></code></span> property specifies the typeface to be used for rendering text in PDF documents. It accepts a prioritized list of font family names, allowing for fallback options when the primary font is not available. Font names can be specified with or without quotes.<span class="nt"></p></span>
<span class="nt"><h2</span> <span class="na">id=</span><span class="s">"usage"</span><span class="nt">></span>Usage<span class="nt"></h2></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"language-css highlighter-rouge"</span><span class="nt">><div</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><pre</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><code><span</span> <span class="na">class=</span><span class="s">"c"</span><span class="nt">></span>/* Single font family */<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>font-family<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"o"</span><span class="nt">></span>:<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>Arial<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"o"</span><span class="nt">></span>;<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>font-family<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"o"</span><span class="nt">></span>:<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"s2"</span><span class="nt">></span>'Times New Roman'<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"o"</span><span class="nt">></span>;<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"c"</span><span class="nt">></span>/* Multiple font families with fallbacks */<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>font-family<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"o"</span><span class="nt">></span>:<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>Helvetica<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"o"</span><span class="nt">></span>,<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>Arial<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"o"</span><span class="nt">></span>,<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>sans-serif<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"o"</span><span class="nt">></span>;<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>font-family<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"o"</span><span class="nt">></span>:<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"s2"</span><span class="nt">></span>'Georgia'<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"o"</span><span class="nt">></span>,<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"s2"</span><span class="nt">></span>'Times New Roman'<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"o"</span><span class="nt">></span>,<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>Times<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"o"</span><span class="nt">></span>,<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>serif<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"o"</span><span class="nt">></span>;<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"c"</span><span class="nt">></span>/* Generic font families */<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>font-family<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"o"</span><span class="nt">></span>:<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>serif<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"o"</span><span class="nt">></span>;<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>font-family<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"o"</span><span class="nt">></span>:<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>sans-serif<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"o"</span><span class="nt">></span>;<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>font-family<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"o"</span><span class="nt">></span>:<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span>monospace<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"o"</span><span class="nt">></span>;<span class="nt"></span></span>
<span class="nt"></code></pre></div></div></span>
<span class="nt"><hr</span> <span class="nt">/></span>
<span class="nt"><h2</span> <span class="na">id=</span><span class="s">"values"</span><span class="nt">></span>Values<span class="nt"></h2></span>
<span class="nt"><h3</span> <span class="na">id=</span><span class="s">"specific-font-family-names"</span><span class="nt">></span>Specific Font Family Names<span class="nt"></h3></span>
<span class="nt"><ul></span>
<span class="nt"><li><strong></span>Quoted names<span class="nt"></strong></span> - Font names with spaces must be quoted: <span class="nt"><code</span> <span class="na">class=</span><span class="s">"language-plaintext highlighter-rouge"</span><span class="nt">></span>'Times New Roman'<span class="nt"></code></span>, <span class="nt"><code</span> <span class="na">class=</span><span class="s">"language-plaintext highlighter-rouge"</span><span class="nt">></span>"Helvetica Neue"<span class="nt"></code></li></span>
<span class="nt"><li><strong></span>Unquoted names<span class="nt"></strong></span> - Single-word font names can be unquoted: <span class="nt"><code</span> <span class="na">class=</span><span class="s">"language-plaintext highlighter-rouge"</span><span class="nt">></span>Arial<span class="nt"></code></span>, <span class="nt"><code</span> <span class="na">class=</span><span class="s">"language-plaintext highlighter-rouge"</span><span class="nt">></span>Georgia<span class="nt"></code></span>, <span class="nt"><code</span> <span class="na">class=</span><span class="s">"language-plaintext highlighter-rouge"</span><span class="nt">></span>Verdana<span class="nt"></code></li></span>
<span class="nt"><li><strong></span>Multiple families<span class="nt"></strong></span> - Comma-separated list providing fallback options<span class="nt"></li></span>
<span class="nt"></ul></span>
<span class="nt"><h3</span> <span class="na">id=</span><span class="s">"generic-font-families"</span><span class="nt">></span>Generic Font Families<span class="nt"></h3></span>
<span class="nt"><ul></span>
<span class="nt"><li><strong></span>serif<span class="nt"></strong></span> - Fonts with serifs (e.g., Times, Georgia)<span class="nt"></li></span>
<span class="nt"><li><strong></span>sans-serif<span class="nt"></strong></span> - Fonts without serifs (e.g., Arial, Helvetica)<span class="nt"></li></span>
<span class="nt"><li><strong></span>monospace<span class="nt"></strong></span> - Fixed-width fonts (e.g., Courier, Consolas)<span class="nt"></li></span>
<span class="nt"><li><strong></span>cursive<span class="nt"></strong></span> - Handwriting-style fonts<span class="nt"></li></span>
<span class="nt"><li><strong></span>fantasy<span class="nt"></strong></span> - Decorative fonts<span class="nt"></li></span>
<span class="nt"></ul></span>
<span class="nt"><h3</span> <span class="na">id=</span><span class="s">"expression-support"</span><span class="nt">></span>Expression Support<span class="nt"></h3></span>
<span class="nt"><ul></span>
<span class="nt"><li><strong></span>calc()<span class="nt"></strong></span> - Can use expressions, but not within part of a font selector<span class="nt"></li></span>
<span class="nt"><li><strong></span>var()<span class="nt"></strong></span> - Can use CSS variables, but not within part of a font selector<span class="nt"></li></span>
<span class="nt"></ul></span>
<span class="nt"><hr</span> <span class="nt">/></span>
<span class="nt"><h2</span> <span class="na">id=</span><span class="s">"notes"</span><span class="nt">></span>Notes<span class="nt"></h2></span>
<span class="nt"><ul></span>
<span class="nt"><li></span>Font names are case-insensitive but convention uses proper case<span class="nt"></li></span>
<span class="nt"><li></span>Trailing commas are automatically removed from font names<span class="nt"></li></span>
<span class="nt"><li></span>Quotes (single or double) are automatically removed when processing<span class="nt"></li></span>
<span class="nt"><li></span>The first available font in the list will be used for rendering<span class="nt"></li></span>
<span class="nt"><li></span>Generic font families (serif, sans-serif, monospace) provide system-dependent fallbacks<span class="nt"></li></span>
<span class="nt"><li></span>For PDF generation, ensure specified fonts are available on the system<span class="nt"></li></span>
<span class="nt"><li></span>Expressions must encompass the entire font-family value, not individual font names<span class="nt"></li></span>
<span class="nt"></ul></span>
<span class="nt"><hr</span> <span class="nt">/></span>
<span class="nt"><h2</span> <span class="na">id=</span><span class="s">"data-binding"</span><span class="nt">></span>Data Binding<span class="nt"></h2></span>
<span class="nt"><p></span>CSS properties support dynamic values through Scryber’s Handlebars-style data binding syntax using `` in inline styles. This enables font-family to be determined dynamically based on model data, user preferences, or document context.<span class="nt"></p></span>
<span class="nt"><h3</span> <span class="na">id=</span><span class="s">"binding-syntax"</span><span class="nt">></span>Binding Syntax<span class="nt"></h3></span>
<span class="nt"><p></span>Data binding expressions are enclosed in double curly braces `` and can reference:<span class="nt"></p></span>
<span class="nt"><ul></span>
<span class="nt"><li></span>Model properties: ``<span class="nt"></li></span>
<span class="nt"><li></span>Nested data: ``<span class="nt"></li></span>
<span class="nt"><li></span>Conditional expressions: ``<span class="nt"></li></span>
<span class="nt"></ul></span>
<span class="nt"><h3</span> <span class="na">id=</span><span class="s">"data-binding-examples"</span><span class="nt">></span>Data Binding Examples<span class="nt"></h3></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"language-html highlighter-rouge"</span><span class="nt">><div</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><pre</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><code><span</span> <span class="na">class=</span><span class="s">"c"</span><span class="nt">></span><span class="ni">&lt;</span>!-- Dynamic font family from model --<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"font-family: "<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
Content using dynamically selected font family
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"c"</span><span class="nt">></span><span class="ni">&lt;</span>!-- Conditional font based on document type --<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"font-family: "<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
Font family selected based on document type
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"c"</span><span class="nt">></span><span class="ni">&lt;</span>!-- User-specific font preferences --<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>body<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>p<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"font-family: , Arial, sans-serif"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
Text using customer's preferred font with fallbacks
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/p<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"c"</span><span class="nt">></span><span class="ni">&lt;</span>!-- Different fonts for different sections --<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>h1<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"font-family: "<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/h1<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"font-family: "<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/body<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"></code></pre></div></div></span>
<span class="nt"><p><strong></span>Note:<span class="nt"></strong></span> Ensure that font names from bound data match fonts available on the PDF generation system. Always include fallback fonts in the bound value or after the binding expression.<span class="nt"></p></span>
<span class="nt"><hr</span> <span class="nt">/></span>
<span class="nt"><h2</span> <span class="na">id=</span><span class="s">"examples"</span><span class="nt">></span>Examples<span class="nt"></h2></span>
<span class="nt"><h3</span> <span class="na">id=</span><span class="s">"example-1-single-sans-serif-font"</span><span class="nt">></span>Example 1: Single Sans-Serif Font<span class="nt"></h3></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"language-html highlighter-rouge"</span><span class="nt">><div</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><pre</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><code><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>p<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"font-family: Arial"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
Simple paragraph using Arial font
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/p<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"></code></pre></div></div></span>
<span class="nt"><h3</span> <span class="na">id=</span><span class="s">"example-2-font-with-spaces"</span><span class="nt">></span>Example 2: Font with Spaces<span class="nt"></h3></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"language-html highlighter-rouge"</span><span class="nt">><div</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><pre</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><code><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"font-family: 'Times New Roman'"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
Text requiring quoted font name due to spaces
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"></code></pre></div></div></span>
<span class="nt"><h3</span> <span class="na">id=</span><span class="s">"example-3-font-fallback-chain"</span><span class="nt">></span>Example 3: Font Fallback Chain<span class="nt"></h3></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"language-html highlighter-rouge"</span><span class="nt">><div</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><pre</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><code><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>p<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"font-family: Helvetica, Arial, sans-serif"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
Text with multiple fallback options for cross-platform compatibility
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/p<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"></code></pre></div></div></span>
<span class="nt"><h3</span> <span class="na">id=</span><span class="s">"example-4-serif-font-stack"</span><span class="nt">></span>Example 4: Serif Font Stack<span class="nt"></h3></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"language-html highlighter-rouge"</span><span class="nt">><div</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><pre</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><code><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>article<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"font-family: Georgia, 'Times New Roman', Times, serif"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
Article content with serif font preferences
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/article<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"></code></pre></div></div></span>
<span class="nt"><h3</span> <span class="na">id=</span><span class="s">"example-5-monospace-for-code"</span><span class="nt">></span>Example 5: Monospace for Code<span class="nt"></h3></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"language-html highlighter-rouge"</span><span class="nt">><div</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><pre</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><code><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>code<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"font-family: Courier, 'Courier New', monospace"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
var x = 10;
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/code<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"></code></pre></div></div></span>
<span class="nt"><h3</span> <span class="na">id=</span><span class="s">"example-6-generic-serif-font"</span><span class="nt">></span>Example 6: Generic Serif Font<span class="nt"></h3></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"language-html highlighter-rouge"</span><span class="nt">><div</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><pre</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><code><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"font-family: serif"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
Text using system's default serif font
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"></code></pre></div></div></span>
<span class="nt"><h3</span> <span class="na">id=</span><span class="s">"example-7-modern-sans-serif-stack"</span><span class="nt">></span>Example 7: Modern Sans-Serif Stack<span class="nt"></h3></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"language-html highlighter-rouge"</span><span class="nt">><div</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><pre</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><code><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>body<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
Body text with system font preferences
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/body<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"></code></pre></div></div></span>
<span class="nt"><h3</span> <span class="na">id=</span><span class="s">"example-8-invoice-header-font"</span><span class="nt">></span>Example 8: Invoice Header Font<span class="nt"></h3></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"language-html highlighter-rouge"</span><span class="nt">><div</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><pre</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><code><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>h1<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
INVOICE
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/h1<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"></code></pre></div></div></span>
<span class="nt"><h3</span> <span class="na">id=</span><span class="s">"example-9-table-data-font"</span><span class="nt">></span>Example 9: Table Data Font<span class="nt"></h3></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"language-html highlighter-rouge"</span><span class="nt">><div</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><pre</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><code><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>table<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"font-family: Verdana, Geneva, sans-serif"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>tr<span class="ni">&gt;&lt;</span>td<span class="ni">&gt;</span><span class="nt"></span></span>Product<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/td<span class="ni">&gt;&lt;</span>td<span class="ni">&gt;</span><span class="nt"></span></span>Price<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/td<span class="ni">&gt;&lt;</span>/tr<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>tr<span class="ni">&gt;&lt;</span>td<span class="ni">&gt;</span><span class="nt"></span></span>Widget<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/td<span class="ni">&gt;&lt;</span>td<span class="ni">&gt;</span><span class="nt"></span></span>$10.00<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/td<span class="ni">&gt;&lt;</span>/tr<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/table<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"></code></pre></div></div></span>
<span class="nt"><h3</span> <span class="na">id=</span><span class="s">"example-10-report-title-font"</span><span class="nt">></span>Example 10: Report Title Font<span class="nt"></h3></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"language-html highlighter-rouge"</span><span class="nt">><div</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><pre</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><code><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"font-family: 'Arial Black', Gadget, sans-serif"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
ANNUAL REPORT 2024
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"></code></pre></div></div></span>
<span class="nt"><h3</span> <span class="na">id=</span><span class="s">"example-11-footer-font"</span><span class="nt">></span>Example 11: Footer Font<span class="nt"></h3></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"language-html highlighter-rouge"</span><span class="nt">><div</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><pre</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><code><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>footer<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"font-family: Tahoma, Geneva, sans-serif"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
Copyright 2024. All rights reserved.
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/footer<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"></code></pre></div></div></span>
<span class="nt"><h3</span> <span class="na">id=</span><span class="s">"example-12-emphasis-font"</span><span class="nt">></span>Example 12: Emphasis Font<span class="nt"></h3></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"language-html highlighter-rouge"</span><span class="nt">><div</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><pre</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><code><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>strong<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"font-family: 'Impact', Charcoal, sans-serif"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
IMPORTANT NOTICE
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/strong<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"></code></pre></div></div></span>
<span class="nt"><h3</span> <span class="na">id=</span><span class="s">"example-13-form-label-font"</span><span class="nt">></span>Example 13: Form Label Font<span class="nt"></h3></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"language-html highlighter-rouge"</span><span class="nt">><div</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><pre</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><code><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>label<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"font-family: Calibri, Candara, sans-serif"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
Customer Name:
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/label<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"></code></pre></div></div></span>
<span class="nt"><h3</span> <span class="na">id=</span><span class="s">"example-14-quote-block-font"</span><span class="nt">></span>Example 14: Quote Block Font<span class="nt"></h3></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"language-html highlighter-rouge"</span><span class="nt">><div</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><pre</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><code><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>blockquote<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"font-family: Garamond, 'Hoefler Text', serif"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
"Quality is not an act, it is a habit."
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/blockquote<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"></code></pre></div></div></span>
<span class="nt"><h3</span> <span class="na">id=</span><span class="s">"example-15-pdf-document-body"</span><span class="nt">></span>Example 15: PDF Document Body<span class="nt"></h3></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"language-html highlighter-rouge"</span><span class="nt">><div</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><pre</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">><code><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>div<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>h2<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">></span>style=<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">></span>"font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif"<span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&gt;</span><span class="nt"></span></span>
Section Title
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/h2<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>p<span class="ni">&gt;</span><span class="nt"></span></span>
This PDF document uses modern web-safe fonts with appropriate
fallbacks to ensure consistent rendering across different systems
while maintaining professional appearance.
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/p<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nt"</span><span class="nt">></span><span class="ni">&lt;</span>/div<span class="ni">&gt;</span><span class="nt"></span></span>
<span class="nt"></code></pre></div></div></span>
<span class="nt"><hr</span> <span class="nt">/></span>
<span class="nt"><h2</span> <span class="na">id=</span><span class="s">"see-also"</span><span class="nt">></span>See Also<span class="nt"></h2></span>
<span class="nt"><ul></span>
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"/reference/cssproperties/font"</span><span class="nt">></span>font<span class="nt"></a></span> - Shorthand font property<span class="nt"></li></span>
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"/reference/cssproperties/font-size"</span><span class="nt">></span>font-size<span class="nt"></a></span> - Font size specification<span class="nt"></li></span>
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"/reference/cssproperties/font-style"</span><span class="nt">></span>font-style<span class="nt"></a></span> - Italic and oblique styles<span class="nt"></li></span>
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"/reference/cssproperties/font-weight"</span><span class="nt">></span>font-weight<span class="nt"></a></span> - Font weight values<span class="nt"></li></span>
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"/reference/htmlattributes/style"</span><span class="nt">></span>style attribute<span class="nt"></a></span> - Inline CSS styles<span class="nt"></li></span>
<span class="nt"></ul></span>
<span class="nt"><hr</span> <span class="nt">/></span>
<span class="nt"></p></span>
<span class="c"><!-- Size based on document type --></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"font-size: "</span><span class="nt">></span>
Standard body text with type-specific sizing
<span class="nt"></div></span>
<span class="nt"></body></span>
</code></pre></div></div>
<p><strong>Note:</strong> Bound font-size values should include units (e.g., ‘pt’, ‘px’). Ensure the bound data provides valid CSS length values to avoid rendering issues.</p>
<hr />
<h2 id="examples">Examples</h2>
<h3 id="example-1-standard-point-size">Example 1: Standard Point Size</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><p</span> <span class="na">style=</span><span class="s">"font-size: 12pt"</span><span class="nt">></span>
Standard body text at 12 points
<span class="nt"></p></span>
</code></pre></div></div>
<h3 id="example-2-keyword-size">Example 2: Keyword Size</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><div</span> <span class="na">style=</span><span class="s">"font-size: medium"</span><span class="nt">></span>
Medium-sized text (12pt)
<span class="nt"></div></span>
</code></pre></div></div>
<h3 id="example-3-large-heading">Example 3: Large Heading</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><h1</span> <span class="na">style=</span><span class="s">"font-size: 24pt"</span><span class="nt">></span>
Document Title
<span class="nt"></h1></span>
</code></pre></div></div>
<h3 id="example-4-extra-large-keyword">Example 4: Extra Large Keyword</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><div</span> <span class="na">style=</span><span class="s">"font-size: x-large"</span><span class="nt">></span>
Extra large heading text (24pt)
<span class="nt"></div></span>
</code></pre></div></div>
<h3 id="example-5-small-print">Example 5: Small Print</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><span</span> <span class="na">style=</span><span class="s">"font-size: xx-small"</span><span class="nt">></span>
Fine print disclaimer text (6pt)
<span class="nt"></span></span>
</code></pre></div></div>
<h3 id="example-6-pixel-based-size">Example 6: Pixel-Based Size</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><div</span> <span class="na">style=</span><span class="s">"font-size: 16px"</span><span class="nt">></span>
Text sized in pixels
<span class="nt"></div></span>
</code></pre></div></div>
<h3 id="example-7-relative-em-size">Example 7: Relative Em Size</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><p</span> <span class="na">style=</span><span class="s">"font-size: 12pt"</span><span class="nt">></span>
Parent text at 12pt
<span class="nt"><span</span> <span class="na">style=</span><span class="s">"font-size: 1.5em"</span><span class="nt">></span>larger nested text (18pt)<span class="nt"></span></span>
<span class="nt"></p></span>
</code></pre></div></div>
<h3 id="example-8-root-em-size">Example 8: Root Em Size</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><body</span> <span class="na">style=</span><span class="s">"font-size: 12pt"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"font-size: 1.5rem"</span><span class="nt">></span>
Text at 1.5 times root size (18pt)
<span class="nt"></div></span>
<span class="nt"></body></span>
</code></pre></div></div>
<h3 id="example-9-percentage-size">Example 9: Percentage Size</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><div</span> <span class="na">style=</span><span class="s">"font-size: 16pt"</span><span class="nt">></span>
<span class="nt"><span</span> <span class="na">style=</span><span class="s">"font-size: 75%"</span><span class="nt">></span>Smaller text (12pt)<span class="nt"></span></span>
<span class="nt"></div></span>
</code></pre></div></div>
<h3 id="example-10-invoice-header-sizes">Example 10: Invoice Header Sizes</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><div</span> <span class="na">style=</span><span class="s">"font-size: xx-large"</span><span class="nt">></span>INVOICE<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"font-size: large"</span><span class="nt">></span>#INV-2024-001<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"font-size: medium"</span><span class="nt">></span>Date: January 1, 2024<span class="nt"></div></span>
</code></pre></div></div>
<h3 id="example-11-table-font-sizes">Example 11: Table Font Sizes</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><table></span>
<span class="nt"><thead</span> <span class="na">style=</span><span class="s">"font-size: 10pt"</span><span class="nt">></span>
<span class="nt"><tr><th></span>Item<span class="nt"></th><th></span>Price<span class="nt"></th></tr></span>
<span class="nt"></thead></span>
<span class="nt"><tbody</span> <span class="na">style=</span><span class="s">"font-size: 9pt"</span><span class="nt">></span>
<span class="nt"><tr><td></span>Widget<span class="nt"></td><td></span>$10.00<span class="nt"></td></tr></span>
<span class="nt"></tbody></span>
<span class="nt"></table></span>
</code></pre></div></div>
<h3 id="example-12-hierarchical-sizes">Example 12: Hierarchical Sizes</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><h1</span> <span class="na">style=</span><span class="s">"font-size: 20pt"</span><span class="nt">></span>Main Title<span class="nt"></h1></span>
<span class="nt"><h2</span> <span class="na">style=</span><span class="s">"font-size: 16pt"</span><span class="nt">></span>Subtitle<span class="nt"></h2></span>
<span class="nt"><h3</span> <span class="na">style=</span><span class="s">"font-size: 14pt"</span><span class="nt">></span>Section Heading<span class="nt"></h3></span>
<span class="nt"><p</span> <span class="na">style=</span><span class="s">"font-size: 11pt"</span><span class="nt">></span>Body text content<span class="nt"></p></span>
</code></pre></div></div>
<h3 id="example-13-report-cover-page">Example 13: Report Cover Page</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><div</span> <span class="na">style=</span><span class="s">"font-size: 32pt; font-weight: bold"</span><span class="nt">></span>
ANNUAL REPORT
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"font-size: 24pt"</span><span class="nt">></span>
Financial Year 2024
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"font-size: 14pt"</span><span class="nt">></span>
Prepared by Finance Department
<span class="nt"></div></span>
</code></pre></div></div>
<h3 id="example-14-form-labels-and-values">Example 14: Form Labels and Values</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><div></span>
<span class="nt"><label</span> <span class="na">style=</span><span class="s">"font-size: small"</span><span class="nt">></span>Customer Name:<span class="nt"></label></span>
<span class="nt"><span</span> <span class="na">style=</span><span class="s">"font-size: medium"</span><span class="nt">></span>John Smith<span class="nt"></span></span>
<span class="nt"></div></span>
</code></pre></div></div>
<h3 id="example-15-dynamic-pdf-content">Example 15: Dynamic PDF Content</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><div</span> <span class="na">style=</span><span class="s">"font-size: 12pt"</span><span class="nt">></span>
<span class="nt"><h2</span> <span class="na">style=</span><span class="s">"font-size: 1.5em"</span><span class="nt">></span>Section Title (18pt)<span class="nt"></h2></span>
<span class="nt"><p></span>
This document demonstrates various font sizes suitable for
PDF generation. The base size is 12pt with headings scaled
proportionally using em units.
<span class="nt"></p></span>
<span class="nt"><p</span> <span class="na">style=</span><span class="s">"font-size: 0.9em"</span><span class="nt">></span>
Slightly smaller supplementary text (10.8pt) for additional
information that should be readable but less prominent.
<span class="nt"></p></span>
<span class="nt"><footer</span> <span class="na">style=</span><span class="s">"font-size: x-small"</span><span class="nt">></span>
Page footer with small text (8pt)
<span class="nt"></footer></span>
<span class="nt"></div></span>
</code></pre></div></div>
<hr />
<h2 id="see-also">See Also</h2>
<ul>
<li><a href="/reference/cssproperties/font">font</a> - Shorthand font property</li>
<li><a href="/reference/cssproperties/font-family">font-family</a> - Font family specification</li>
<li><a href="/reference/cssproperties/line-height">line-height</a> - Line spacing</li>
<li><a href="/reference/cssproperties/font-weight">font-weight</a> - Font weight values</li>
<li><a href="/reference/htmlattributes/style">style attribute</a> - Inline CSS styles</li>
</ul>
<hr />
</div>
<!-- Future-ready styling with data binding -->
<body>
<!-- Stretch based on space constraints -->
<p style="font-stretch: ">
Content that might use condensed fonts in narrow spaces
</p>
<!-- User preference binding -->
<div style="font-stretch: ">
</div>
<!-- Layout-aware stretch values -->
<div style="font-stretch: ">
Prepared for future font-stretch implementation
</div>
</body>
Note: Font-stretch is currently not applied during PDF rendering. These data binding examples demonstrate the syntax for future compatibility when the property is implemented. The binding expressions will be processed but have no visual effect.
Examples
Example 1: Normal Stretch (No Effect)
<p style="font-stretch: normal">
This text uses normal font stretch (currently not applied)
</p>
Example 2: Condensed Stretch (No Effect)
<div style="font-stretch: condensed">
Condensed text (property recognized but not rendered)
</div>
Example 3: Expanded Stretch (No Effect)
<div style="font-stretch: expanded">
Expanded text (property recognized but not rendered)
</div>
Example 4: Ultra-Condensed (No Effect)
<div style="font-stretch: ultra-condensed">
Ultra-condensed text (currently has no visual effect)
</div>
Example 5: Semi-Expanded (No Effect)
<p style="font-stretch: semi-expanded">
Semi-expanded text (not currently applied)
</p>
Example 6: Percentage Value (No Effect)
<div style="font-stretch: 75%">
Text with 75% stretch value (not implemented)
</div>
Example 7: Table Header (No Effect)
<table>
<thead style="font-stretch: condensed">
<tr><th>Column 1</th><th>Column 2</th></tr>
</thead>
</table>
Example 8: Heading with Stretch (No Effect)
<h1 style="font-stretch: expanded; font-weight: bold">
Wide Heading (stretch not applied)
</h1>
Example 9: Narrow Text Block (No Effect)
<div style="font-stretch: ultra-condensed; width: 100pt">
Narrow column text with ultra-condensed stretch
(property has no current effect)
</div>
Example 10: Combined Properties (Partial Effect)
<div style="font-family: Arial; font-size: 12pt; font-stretch: condensed">
Text with multiple font properties - family and size work,
but stretch has no effect
</div>
Example 11: Invoice Header (No Effect)
<div style="font-size: 24pt; font-weight: bold; font-stretch: expanded">
INVOICE
</div>
Example 12: Certificate Text (No Effect)
<div style="font-stretch: extra-expanded; text-align: center">
CERTIFICATE OF ACHIEVEMENT
</div>
Example 13: Condensed Table (No Effect)
<table style="font-stretch: condensed; font-size: 9pt">
<tr>
<td>Compact data</td>
<td>In condensed format</td>
</tr>
</table>
Example 14: Form Labels (No Effect)
<label style="font-stretch: semi-condensed">
Customer Name:
</label>
Example 15: Future-Ready Styling
<!-- This CSS is prepared for future implementation -->
<style>
.condensed-heading {
font-family: Arial, sans-serif;
font-size: 16pt;
font-weight: bold;
font-stretch: condensed; /* Not currently applied */
}
.expanded-title {
font-family: Helvetica, sans-serif;
font-size: 24pt;
font-weight: 900;
font-stretch: expanded; /* Not currently applied */
}
</style>
<div class="expanded-title">
ANNUAL REPORT 2024
</div>
<div class="condensed-heading">
Executive Summary
</div>
<p style="font-stretch: normal">
Regular body text with normal stretch value.
While font-stretch is not currently implemented,
including it in stylesheets ensures forward compatibility
when this feature is added in future versions.
</p>
See Also
- font - Shorthand font property
- font-family - Font family specification
- font-style - Italic and oblique styles
- font-weight - Font weight values
- font-size - Font size specification
- style attribute - Inline CSS styles