More robust SVG text demo

Developer
Taylor Hunt
Size
1,929 Kb
Views
22,264
  1. More robust SVG text demo Previews
  2. More robust SVG text demo HTML Codes
  3. More robust SVG text demo CSS Codes

How do I make an more robust svg text demo?

This pen displays how much closer a font fallback is when using the font-size-adjust and lengthAdjust properties.. What is a more robust svg text demo? How do you make a more robust svg text demo? This script and codes were developed by Taylor Hunt on 29 September 2022, Thursday.

More robust SVG text demo Previews
IQ Test

More robust SVG text demo - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>More robust SVG text demo</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Bitter'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h2>Webfont</h2>
<svg height="60" width="500"> <rect height="39" width="296" y="10"/> <text y="1em" style="font-family: Bitter">Fee fi fo fum</text>
</svg>
<hr>
<h2>Fallback</h2>
<svg height="60" width="500"> <rect height="39" width="296" y="10"/> <text y="1em">Fee fi fo fum</text>
</svg>
<hr>
<h2>Fallback with <code>textLength</code> and <code>font-size-adjust</code></h2>
<svg height="60" width="500"> <rect height="39" width="296" y="10"/> <text y="1em" textLength="297" lengthAdjust="spacingAndGlyphs" font-size-adjust="0.531">Fee fi fo fum</text>
</svg>
<hr>
<h2>Example image of fallback when both are supported (that is, in Firefox)</h2>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/183091/textlength-and-font-size-adjust.png" alt="When both textLength and font-size-adjust are supported, the fallback font is adjusted to be as wide and as tall as the intended webfont.">
</body>
</html>

More robust SVG text demo - Script Codes CSS Codes

text { font-size: 3em; font-family: serif;
}
rect { fill: none; stroke: red;
}
More robust SVG text demo - Script Codes
More robust SVG text demo - Script Codes
Home Page Home
Developer Taylor Hunt
Username tigt
Uploaded September 29, 2022
Rating 3
Size 1,929 Kb
Views 22,264
Do you need developer help for More robust SVG text demo?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Taylor Hunt (tigt) Script Codes
Name
Cross-Browser data URI encoding test
Web site header, circa 2016
SVG Coloring Book
Tabs without JavaScript... or CSS
Deuteragonist Image
Favicon download test
SVG break-all text wrapping
CSS Scroll thumb autosizing
Natural dimensions auto-sizing
Scaling inline SVG with object-fit
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!