Beispiel:CSS2 font-style.html
Aus SELFHTML-Wiki
<!DOCTYPE html> <html lang="de">
<head>
<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" media="screen" href="./Beispiel:Grundlayout.css"> <link href="https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,100;8..144,400;8..144,700;8..144,800;8..144,900;8..144,1000&display=swap" rel="stylesheet"> <link href="https://fonts.cdnfonts.com/css/roboto-flex" rel="stylesheet">
<title>Variable Fonts - 2</title>
<style>
@font-face {
font-family: 'Roboto Flex';
font-stretch: 25% 151%;
font-style: oblique -90deg 90deg;
font-weight: 100 1000;
src: url(https://fonts.gstatic.com/s/robotoflex/v9/NaPccZLOBv5T3oB7Cb4i0zu6RME.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
#changingText {
font-family: "Roboto Flex", sans-serif;
text-align: center;
--fontSize: 48px;
font-size: var(--fontSize);
--fontWeight: 400;
font-weight: var(--fontWeight);
--fontStyle: oblique 20deg;
font-style: var(--fontStyle);
}
.kursiv {
font-style: italic;
}
.oblique {
font-style: oblique;
}
[contenteditable] {
padding: 1em;
padding-left: 3em;
margin: 1em;
outline: thin dashed #CCC;
position: relative;
}
[contenteditable]:after {
position: absolute;
content: '✏';
left: -0.3em;
top: -0.5em;
font-size: 4rem;
color: #c82f04;
transform: rotate(45deg);
font-style: normal;
}
[contenteditable]:hover {
outline: thin dashed #c82f04;
}
form {
margin: 2em;
width: 23em;
display: grid;
grid-template-columns: 13em 2em 1fr;
}
form p {
grid-column: span 3;
}
</style>
<script>
'use strict';
document.addEventListener('DOMContentLoaded', function () {
function printValue(slider, output, stage, varName, suffix) {
const input = document.getElementById(slider);
const print = document.getElementById(output);
const result = document.getElementById(stage);
print.innerHTML = input.value;
input.oninput = function () {
print.innerHTML = this.value;
result.style.setProperty(varName, 'oblique ' + this.value + suffix);
};
} // printValue
printValue("fontStyle", "fontStyleOutput", "changingText", "--fontStyle", "deg");
});
</script>
</head>
<body>
Variable Fonts - 2
font-style
<form id="slider" action="">
Ändern Sie
<label for="fontStyle">Neigung (font-style)</label> <output id="fontStyleOutput">0</output> <input id="fontStyle" name="fontStyle" type="range" min="-0" max="15" value="5" />
</form>
SELFHTML
Die Energie des Verstehens!
schräg gestellte Schrift mit font-style
- {font-style: normal;}
- {font-style: italic;}
- {font-style: oblique;}
Hinweis: Stand Mitte 2026 kann Safari das noch nicht.
</body>
</html>
