Beispiel:Variable-Fonts-1.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: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 - 1</title>
   <style>

@font-face { 

 font-family: 'Roboto Flex';
 font-style: oblique 0deg 10deg;
 font-weight: 100 1000;
 font-stretch: 25% 200%;
 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;

}

  1. changingText {

font-family: "Roboto Flex", sans-serif; text-align: center; 

 --fontSize: 48px;
 font-size: var(--fontSize);
 --fontWeight: 400;
 font-weight: var(--fontWeight);
 --fontStretch: 100%;
 font-stretch: var(--fontStretch);

}


[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); }

[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, this.value + suffix);
       };
   } // printValue

   printValue("fontSize", "fontSizeOutput", "changingText", "--fontSize", "px");

printValue("fontStretch", "fontStretchOutput", "changingText", "--fontStretch", "%"); 

   printValue("fontWeight", "fontWeightOutput", "changingText", "--fontWeight", "");

});


</script> </head> <body>

Variable Fonts -1

<form id="slider" action="">

Ändere

 <label for="fontSize">die Schriftgröße (font-size)</label>
 <output id="fontSizeOutput">48px</output>

<input id="fontSize" name="fontSize" type="range" min="8" max="100" value="48" /> 

 <label for="fontStretch">die Laufweite (font-stretch)</label>
 <output id="fontStretchOutput">100%</output>

<input id="fontStretch" name="textStretch" type="range" min="50" max="200" value="100" /> 

 <label for="fontWeight">die Schriftstärke (font-weight)</label>
 <output id="fontWeightOutput">400</output>

<input id="fontWeight" name="fontWeight" type="range" min="100" max="1000" value="500" /> </form>

SELFHTML

Die Energie des Verstehens!

</body> </html>

Abgerufen am 25.08.2026
von "http://wiki.selfhtml.org/wiki/Beispiel:Variable-Fonts-1.html"