Beispiel:CSS2 font-style.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche
<!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>