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:SELFHTML-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>
<h1>Variable Fonts - 2<br><code>font-style</code></h1>
<form id="slider" action="">
<p>Ändern Sie</p>
<label for="fontStyle">Neigung (<em>font-style</em>)</label>
<output id="fontStyleOutput">0</output>
<input id="fontStyle" name="fontStyle" type="range" min="-90" max="90" value="10" />
</form>
<div id="changingText" contenteditable>
<h2>SELFHTML</h2>
<p>Die Energie des Verstehens!</p>
</div>
<p style="color:red;">Das Beispiel funktioniert nicht richtig! Es wird in naher Zukunft korrigiert.</p>
<h2>schräg gestellte Schrift mit font-style</h2>
<ul>
<li>{font-style: normal;}</li>
<li class="kursiv">{font-style: italic;}</li>
<li class="oblique">{font-style: oblique;}</li>
</ul>
</body>
</html>