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
3
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

Questions connexes

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

De nouvelles questions

1 J'essaie d'ajouter mon bouton de fermeture à mes nouveaux éléments de liste, mais cela ne semble pas fonctionner
4 Changer le curseur sur n'importe quelle page de survol de texte
3 Pourquoi l'emballage flex-wrap n'est-il pas également?
1 Existe-t-il un moyen d'utiliser le dimensionnement de la boîte: boîte de bordure sans fixation de la largeur?
4 La couleur d'arrière-plan ne s'étend pas sur toute la largeur de l'écran
2 Comment puis-je empêcher le menu hamburger de mon site Web de laisser les gens faire défiler horizontalement
1 La compilation de Gatsby échoue avec google-fonts
3 Pourcentage CSS de transition (pour la barre de progression)
1 Comment empêcher le contenu de sortir du site Web?
2 Problème de lien entre les blocs de pseudo-éléments
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...