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>
css
2
Kolya 7 nov. 2019 à 18:49

1 réponse

Meilleure 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>
2
disinfor 7 nov. 2019 à 17:22
58752373

Questions connexes

16 Est-il possible d'appliquer du CSS à la moitié d'un caractère?

De nouvelles questions

2 Comment centrer les bordures dans une autre case?
3 Comment changer le nom du mois anglais en arabe
2 Existe-t-il un moyen de mettre à l'échelle un SVG en ligne depuis l'extérieur de la balise <svg>?
2 Problème de bouton CSS Bootstrap, pas de changement de couleurs
3 <li> éléments mis en ligne lors du redimensionnement de ma fenêtre
2 Comment positionner le div absolu par rapport à un autre div
3 Comment voir les modifications de la page Web sans effacer le cache du navigateur?
3 Comment faire afficher l'image en tant qu'élément de bloc lorsque sa balise h2 à l'intérieur
3 Manipuler le contenu # pour tous les éléments div (avec role = "tabpanel") - style = "display: none;" pour afficher: bloquer;
2 Appliquer la propriété de rayon de bordure à la fenêtre du navigateur?
Toutes les questions sur css >

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.

Plus à propos css...