CSS text-rendering
Last Updated :
29 Aug, 2022
Text-rendering is a property that allows you to choose what to optimize when rendering text. It sends the information to the rendering engine about what to optimize for while rendering text.
It’s actually not a CSS property and is not defined in any CSS standard. It’s an SVG property but Gecko and Webkit browsers allow you to apply this property to the HTML elements. In doing so compromises among other aspects like speed, legibility(Clarity), and geometric precision.
Syntax:
text-rendering : auto | optimizeSpeed |
optimizeLegibility | geometricPrecision;
Property Values:
- auto: Browser makes predictions about when you can adjust speed, readability, and geometric accuracy while drawing text. Different browsers respond with different values.
- optimizeSpeed: Browser prioritizes more the rendering speed compared to legibility and geometric precision while drawing text. It disables kerning and ligatures.
- optimizeLegibility: Browser prioritizes more legibility compared to rendering speed and geometric precision while drawing text. It enables kerning and optional ligatures.
- geometricPrecision: The browser prioritizes more geometric precision compared to rendering speed and legibility while drawing text. Certain aspects of fonts like kerning, don’t scale linearly hence it can make text using those fonts look even better.
Example :
HTML
<!DOCTYPE html>
<html>
<head>
<title>Geeks For Geeks</title>
<style>
.auto {
text-rendering: auto;
}
.optimizeSpeed{
text-rendering: optimizeSpeed;
}
.optimizeLegibility {
text-rendering: optimizeLegibility;
}
.geometricPrecision{
text-rendering: geometricPrecision;
}
</style>
</head>
<body>
<h2 style="color:#3FBF3F">text-rendering</h2>
<p class="auto">Welcome to GFG</p>
<p class="optimizeSpeed">Welcome to GFG</p>
<p class="optimizeLegibility">Welcome to GFG</p>
<p class="geometricPrecision">Welcome to GFG</p>
</body>
</html>
|
Output:
Supported Browsers:
- Google Chrome 4
- Edge 79
- Firefox 1
- Opera 15
- Safari 5
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...