1
votes

Pourquoi @ font-face échoue dans ma feuille de style?

Je souhaite spécifier une police personnalisée dans ma feuille de style. Je peux faire fonctionner la police dans une instruction de lien dans mon en-tête html, mais je préfère la mettre dans ma feuille de style. Lorsque je décommente l'instruction de lien, cela fonctionne. Voici mon fichier html:

@font-face {
  font-family: Metamorphous;
  // I have tried it both with and without the format specifier.
  src: url(https://fonts.googleapis.com/css?family=Metamorphous) format("truetype");
}

.customFont {
  font-family: Metamorphous, Sans-Serif;
  background-color: #294575;
  color: #6291D8;
}

body {
  font-family: Sans-Serif;
  font-size: 24px;
}

Voici mon fichier .css:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Font Bug</title>
  <link rel="stylesheet" href="fontBug.css">
<!--  <link href='https://fonts.googleapis.com/css?family=Metamorphous' rel='stylesheet'>-->
</head>
<body>
  <p>This is normal text. It should display in a sans-serif font in black against white.</p>
  <p class="customFont">This text should use the custom serif font, in a custom color</p>
<p>When I uncomment the link line inside the head tag of the html file, the 
  font works. I don't understand why it doesn't work from the style sheet.
  I know it's using the style sheet because I get the custom colors.
</p>
</body>
</html>

html css font-face

0 commentaires

3 Réponses :

1
votes

Je pense que vous l'avez peut-être mis en œuvre de manière incorrecte dans votre feuille de style. Essayez de remplacer

<h1> Test </h1>

par

@import url('https://fonts.googleapis.com/css2?family=Metamorphous&display=swap');

h1 {
  font-family: 'Metamorphous', cursive;
}

Cela semble fonctionner

@import url('https://fonts.googleapis.com/css2?family=Metamorphous&display=swap');

h1 {
  font-family: 'Metamorphous', cursive;
}

@font-face {
  font-family: Metamorphous;
  // I have tried it both with and without the format specifier.
  src: url(https://fonts.googleapis.com/css?family=Metamorphous) format("truetype");
}

1 commentaires

Eh bien, ça marche. Cependant, j'ai également lu ( tutorialrepublic.com/html-tutorial/html-styles .php ) que je devrais éviter d'utiliser (a) import pour des raisons de performances. C'est l'une des raisons pour lesquelles j'essayais de faire fonctionner (a) font-face.

1
votes

@ font-face est utilisé pour importer la police que vous avez créée.

Mais Metamorphous est une police Web sécurisée et elle peut être importée en utilisant des méthodes que l'autre gars a déjà dites.

5 commentaires

Je ne sais pas qui "l'autre gars" est ici. Et je ne sais pas ce que vous faites.

En règle générale, vous n'êtes pas censé faire référence à d'autres affiches par leur nom dans votre réponse, mais vous êtes libre de le faire dans votre commentaire. Cette idée est probablement plus adaptée à un commentaire sur une autre réponse qu'à une réponse distincte. De cette façon, vous êtes libre de m'adresser à moi ou à Artemiss_0 par mon nom au lieu de dire "l'autre gars".

Je parlais de @ Artemiss_0

Je voulais expliquer pourquoi font-face ne fonctionne pas. C'est la différence fondamentale entre font-face et import. Les polices auto-conçues ne sont pas des polices globales. Vous devez concevoir celui-là. Pour ces polices, vous pouvez utiliser font-face. Mais la police que vous avez utilisée est une police globale et elle est disponible pour tout le monde. Vous devez donc utiliser l'importation pour ajouter cette police à votre site Web.

Merci. Je pense que font-face est en fait destiné aux polices installées sur le serveur, plutôt que accessibles via une URL. Cela inclut, mais sans s'y limiter, les polices que vous avez conçues. Je n'ai pas conçu la police, mais je l'ai téléchargée dans mon environnement de développement et j'ai défini l'URL font-face sur le chemin relatif de ce fichier (par rapport au fichier .css) et cela a commencé à fonctionner. Je ne sais pas pourquoi ils l'appellent la fonction url, mais l'alternative, local (), est apparemment pour les polices installées sur l'ordinateur local. (Je n'ai pas vérifié cela.) Alors maintenant ça marche. Merci de votre aide.

0
votes

Mon problème était que j'avais mal compris la signification de la fonction url () . Je pensais que c'était pour une URL vers une ressource sur le Web, mais c'est en fait pour un chemin vers un fichier local. Il s'avère que font-face est en fait destiné aux polices installées sur le serveur, plutôt que accessibles via une URL. Les gens m'ont dit que c'était pour des "polices auto-conçues". Cela inclut, mais sans s'y limiter, les polices que vous avez conçues. Je n'ai pas conçu la police, mais je l'ai téléchargée dans mon environnement de développement et j'ai défini l'URL font-face sur le chemin relatif de ce fichier (par rapport au fichier .css) et cela a commencé à fonctionner. Je ne sais pas pourquoi ils l'appellent la fonction url, mais l'alternative, local (), est apparemment pour les polices installées sur l'ordinateur local. Merci aux deux personnes qui ont répondu. Leurs réponses m'ont guidé vers cette solution.

0 commentaires