recherche

Maison  >  Questions et réponses  >  le corps du texte

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

<p>font-stretch属性根本不起作用。这是我的代码：</p> <pre class="brush:php;toolbar:false;"><!DOCTYPE html> <html> <tête> <meta charset="utf-8"> <titre>font-stretch</titre> <style> p{ taille de police : 5em ; famille de polices : « Myriad Pro » ; } </style> ≪/tête> <corps> <p> <span style="font-stretch : ultra-condensé">P</span> <span style="font-stretch: extra-condensé">P</span> <span style="font-stretch: condensé">P</span> <span style="font-stretch : semi-condensé">P</span> <span style="font-stretch: normal">P</span> <span style="font-stretch : semi-développé">P</span> <span style="font-stretch : étendu">P</span> <span style="font-stretch: extra-expansed">P</span> <span style="font-stretch : ultra-expansé">P</span> </p> </corps> </html></pre> <p>
P粉676821490P粉676821490449 Il y a quelques jours507

répondre à tous(2)je répondrai

  • P粉787934476

    P粉7879344762023-08-27 11:21:36

    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.

    répondre
    0
  • P粉567112391

    P粉5671123912023-08-27 10:45:57

    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;
}
    <p style="font-family:sans-serif; font-size:12px">Font-stretch: <input type="range" id="fontStretch" value="50" min="50" max="200" step="5"></p>
<p style="font-family:sans-serif; font-size:12px">Font-weight: <input type="range" id="fontWeight" value="200" min="200" max="900" step="10"></p>
<p id="variableTest" style="font-stretch:50%" class="inconsolata variableTest">Hamburgefons</p>

<h2>Variable fonts Example</h2>

<p>
  <span style="font-stretch: ultra-condensed">P</span>
  <span style="font-stretch: extra-condensed">P</span>
  <span style="font-stretch: condensed">P</span>
  <span style="font-stretch: semi-condensed">P</span>
  <span style="font-stretch: normal">P</span>
  <span style="font-stretch: semi-expanded">P</span>
  <span style="font-stretch: expanded">P</span>
  <span style="font-stretch: extra-expanded">P</span>
  <span style="font-stretch: ultra-expanded">P</span>
</p>

<h2>Static fonts Example (custom fonts to widths mapping)</h2>
<p class="customMap">
  <span style="font-stretch: 50%">g</span>
  <span style="font-stretch: 200%">g</span>
</p>


<script>
  fontStretch.addEventListener('change', (e) => {
    variableTest.style.fontStretch = e.currentTarget.value + '%';
  });

  fontWeight.addEventListener('change', (e) => {
    variableTest.style.fontWeight = e.currentTarget.value;
  })
</script>

    répondre
    0
  • Annulerrépondre