Extra_variablefonts

Variable Fonts

• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_fonts/Variable_fonts_guide
• https://fonts.google.com/knowledge/introducing_type/introducing_variable_fonts

Manipulation über CSS

Über CSS werden die Settings über die Property gesetzt, in der Schriftspezifikation seht ihr, welche Settings variabel sind (von Schrift zu Schrift unterschiedlich)

.variablefont{
    /* width, weight, ialique*/
    font-variation-settings: "wdth" 0, "wght" 100, "ital" 100;
    animation: letteranimation 5s ease-in-out infinite; /* Infos zu animation-timing-function https://cubic-bezier.com/#.67,.05,.13,1.48*/
}
@keyframes letteranimation {
    /* create some keyframes and animation properties */
    0%{
        
    }
    100%{
        
    }
}
    

Manipulation über JavaScript

Über JavaScript können die Settings über das Style Attribut gesetzt werden. Beachte, es müssen alle Angaben vorkommen, man kann nicht bloss eine einzelne überschreiben.

    let element=document.getElementbyId("myvarfont");
    let wdth=20;
    let wgth=600;
    let ital=60;
    elements[i].style.fontVariationSettings = "'wdth' "+wdth+",'wght' " + wght+ "'ital'"+ ital;
                

Das Auslesen über JavaScript ist etwas aufwändiger als das Auslesen eines einfachen Stils. Der String, der die Angaben enthält, muss noch zerlegt werden:

//get styles 
const element=document.getElementbyId("myvarfont");
const computedStyles = window.getComputedStyle(element);

// Get the value of font-variation-settings property
const fontVariationSettings = computedStyles.getPropertyValue('font-variation-settings');

// Split the font-variation-settings value into individual settings
const settings = fontVariationSettings.split(',');

 // Iterate over the settings and extract the property-value pairs
settings.forEach(setting => {
                let [property, value] = setting.trim().split(' ');
                //console.log(property, value) 
               
});