This content originally appeared on Manuel Matuzović - Blog and was authored by Manuel Matuzović
Adjustable features of a variable font are called axes. You can use the font-variations-settings property to change these features by specifying the four letter axis name along with a value.
For example, the Saira variable font has two axes, weight ('wght') and width ('wdth'). This is how the font looks like by default:
This is just a test.
You can set the weight to a value between 100 and 900.
p {
font-variation-settings: 'wght' 736;
}This is just a test.
You can set the width to a value between 50 and 125.
p {
font-variation-settings: 'wdth' 36;
}This is just a test.
Of course, you can also combine them.
p {
font-variation-settings: 'wght' 736, 'wdth' 36;
}This is just a test.
The number and the kind of axes a font supports, depends on the font. Some have just one or two axes, others have many.
My blog doesn't support comments yet, but you can reply via blog@matuzo.at.
This content originally appeared on Manuel Matuzović - Blog and was authored by Manuel Matuzović
Manuel Matuzović | Sciencx (2022-11-01T00:00:00+00:00) Day 27: the font-variation-settings property. Retrieved from https://www.scien.cx/2022/11/01/day-27-the-font-variation-settings-property-2/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.