font-variation-settings: value; object.style.fontVariationSettings = "value"; <'font-variation-settings'> = normal | [ <string> <number>]# normal None of the features are enabled.
<string> A case-sensitive OpenType or TrueType variation axis name.
<number> An integer or zero or more decimal digits followed by a dot (.) followed by one or more decimal digits. The first character may be preceded by a sign (- or +). The last character may be succeeded by an exponent (e or E) and an integer.
<!doctype html>
<html>
<head>
<style>
@font-face
{
font-family: myfontfamily;
src: url(/assets/ttf/Inconsolata.ttf);
}
p
{
font-family: myfontfamily;
font-size: 48px;
font-variation-settings: "ital" 12;
}
</style>
</head>
<body>
<p>ital</p>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
@font-face
{
font-family: myfontfamily;
src: url(/assets/ttf/Inconsolata.ttf);
}
p
{
font-family: myfontfamily;
font-size: 48px;
font-variation-settings: "opsz" 12;
}
</style>
</head>
<body>
<p>opsz</p>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
@font-face
{
font-family: myfontfamily;
src: url(/assets/ttf/Inconsolata.ttf);
}
p
{
font-family: myfontfamily;
font-size: 48px;
font-variation-settings: "slnt" 12;
}
</style>
</head>
<body>
<p>slnt</p>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
@font-face
{
font-family: myfontfamily;
src: url(/assets/ttf/Inconsolata.ttf);
}
p
{
font-family: myfontfamily;
font-size: 48px;
font-variation-settings: "wdth" 900;
}
</style>
</head>
<body>
<p>wdth</p>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
@font-face
{
font-family: myfontfamily;
src: url(/assets/ttf/Inconsolata.ttf);
}
p
{
font-family: myfontfamily;
font-size: 48px;
font-variation-settings: "wght" 900;
}
</style>
</head>
<body>
<p>wght</p>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
@font-face
{
font-family: myfontfamily;
src: url(/assets/ttf/Inconsolata.ttf);
}
p
{
font-family: myfontfamily;
font-size: 48px;
}
</style>
</head>
<body>
<button>initial</button>
<button>normal</button>
<button value="'ital' 12">ital</button>
<button value="'opsz' 12">opsz</button>
<button value="'slnt' 12">slnt</button>
<button value="'wdth' 900">wdth</button>
<button value="'wght' 900">wght</button>
<p>font-variation-settings</p>
<script>
function myfunction(myparameter)
{
const mytarget = myparameter.target;
const myproperty = mytarget.value || mytarget.innerHTML;
document.querySelector("p").style.fontVariationSettings = myproperty;
}
for(const mybutton of document.querySelectorAll("button"))
{
mybutton.addEventListener("mouseover", myfunction);
}
</script>
</body>
</html>