Le corps doit afficher une police d'écriture mais ne le fera que si la ligne de commentaire n'est pas commentée.
Il semble que je ne puisse pas utiliser de propriétés personnalisées dans @ font-face? Testé sur FF et Chrome.
Que se passe t-il ici?
:root {
--backgroundColor: cornflowerblue;
--textColor: white;
--fontName: 'Indie Flower';
}
@font-face {
font-family: var(--fontName);
/* font-family: 'Indie Flower'; */
src: url(https://fonts.gstatic.com/s/indieflower/v11/m8JVjfNVeKWVnh3QMuKkFcZVaUuH.woff2) format('woff2');
}
body {
background-color: var(--backgroundColor);
color: var(--textColor);
font-family: var(--fontName);
}
<p>Custom CSS properties don't work inside @font-face rule?</p>
1 réponse
Le problème est de savoir comment le font-name
est réellement sorti pour que le navigateur le lise. Supprimez les guillemets pour la racine var et ajoutez-les autour de l'appel à la variable.
:root {
--backgroundColor: cornflowerblue;
--textColor: white;
--fontName: Indie Flower;
}
@font-face {
font-family: 'var(--fontName)';
src: url(https://fonts.gstatic.com/s/indieflower/v11/m8JVjfNVeKWVnh3QMuKkFcZVaUuH.woff2) format('woff2');
}
body {
background-color: var(--backgroundColor);
color: var(--textColor);
font-family: 'var(--fontName)';
}
<p>Custom CSS properties don't work inside @font-face rule?</p>
Modifier Voici la version avec un repli.
:root {
--backgroundColor: cornflowerblue;
--textColor: white;
--fontName: "Indie Flower";
--fallBack: sans-serif;
--fullFont: 'var(--fontName)', var(--fallBack);
}
@font-face {
font-family: 'var(--fontName)';
src: url(https://fonts.gstatic.com/s/indieflower/v11/m8JVjfNVeKWVnh3QMuKkFcZVaUuH.woff2) format('woff2');
}
body {
background-color: var(--backgroundColor);
color: var(--textColor);
font-family: 'var(--fontName)', var(--fallBack);
}
p {
font-family: var(--fullFont);
}
<p>Custom CSS properties don't work inside @font-face rule?</p>
Questions connexes
De nouvelles questions
css
CSS (Cascading Style Sheets) est un langage de feuille de style de représentation utilisé pour décrire l'apparence et la mise en forme des documents HTML (HyperText Markup Language), XML (Extensible Markup Language) et des éléments SVG, y compris (mais sans s'y limiter) les couleurs, la mise en page, les polices, et animations. Il décrit également comment les éléments doivent être affichés à l'écran, sur papier, dans un discours ou sur d'autres supports.