Comment résoudre le problème selon lequel l'attribut d'étirement de la police ne peut pas être démarré

Question

La propriété font-stretch ne fonctionne pas du tout. Voici mon code : font-stretch

P粉787934476 · Answer

Vous pouvez utiliser font-stretch pour choisir une police condensée ou étendue parmi ces polices. Cette propriété n'a aucun effet si la police que vous utilisez ne fournit pas de police compressée ou étendue.

P粉567112391 · Answer

L'interface utilisateur de Google Fonts préfère actuellement toujours la sortie CSS statique/à poids unique.

Mais vous pouvez forcer manuellement l'API à afficher des @font-facerègles pour les polices variables :

https://fonts.googleapis.com/css2?family=Inconsolata:wdth,wght@50..200,200..900

Il est important d'utiliser '..' comme séparateur de plage - sinon vous vous retrouverez avec un CSS contenant plusieurs woff2 URL de fichiers statiques.

De plus, l'API de Google utilise une certaine détection d'agent utilisateur (également connue sous le nom de reniflage de navigateur) pour assurer une compatibilité ascendante (pour les navigateurs qui ne prennent pas en charge les polices variables). C'est logique... Malheureusement, cela ne fonctionne pas très bien : certains navigateurs comme Opera (qui supporte parfaitement VF) reçoivent également des polices statiques. (Cela peut également fonctionner pour d'autres navigateurs basés sur Chromium/Blink)

Pour contourner le problème, je recommande d'ouvrir l'URL CSS ci-dessus dans Firefox. Le résultat devrait ressembler à ceci :

@font-face {
  font-family: 'Inconsolata';
  font-style: normal;
  font-weight: 200 900;
  font-stretch: 50% 200%;
  src: url(https://fonts.gstatic.com/s/inconsolata/v31/QldKNThLqRwH-OJ1UHjlKGlZ5qg.woff2) format('woff2');
}

Remarquefont-weight和font-stretchLa valeur de l'attribut contient 2 valeurs, indiquant la plage de poids/largeur. C'est un bon indicateur que vous avez acquis les règles (variables) correctes.

Exemple : police variable Inconsolata

@font-face {
  font-family: "Inconsolata";
  font-style: normal;
  font-weight: 200 900;
  font-stretch: 50% 200%;
  src: url(https://fonts.gstatic.com/s/inconsolata/v31/QldKNThLqRwH-OJ1UHjlKGlZ5qg.woff2) format("woff2");
}

body {
  font-size: 36px;
  font-family: sans-serif;
}

h2 {
  font-size: 0.5em;
  color: red;
}

p {
  font-family: Inconsolata;
  transition: 0.8s;
}

.customMap {
  font-family: sans-serif;
}

@font-face {
  font-family: "Inconsolata2";
  src: url(https://fonts.gstatic.com/s/robotocondensed/v25/ieVl2ZhZI2eCN5jzbjEETS9weq8-19K7DQ.woff2) format("woff2");
  font-stretch: 50%;
}

@font-face {
  font-family: "Inconsolata2";
  src: url(https://fonts.gstatic.com/s/roboto/v30/KFOjCnqEu92Fr1Mu51TLBCc6CsQ.woff2) format('woff2');
  font-stretch: 200%;
  font-style: normal;
  font-weight: normal;
}

.customMap {
  font-family: "Inconsolata2";
  font-style: normal;
}

Font-stretch: 
Font-weight: 
Hamburgefons

Variable fonts Example


  P
  P
  P
  P
  P
  P
  P
  P
  P


Static fonts Example (custom fonts to widths mapping)

  g
  g