28172 sujets

CSS et mise en forme, CSS3

[Résolu] Font-stretch

bonjour, font-stretch fonctionne dans safari et firefox, mais pas dans chrome

html, body {
margin: 0;
padding: 0;
width: 100%;
font-size: 100%;
font-family: system-ui, sans-serif;
font-stretch: 75%;


une idée?
merci
Modérateur
Salut,

Dans le tableau des compatibilité du lien de boteha_2 il y a une étoile pour chrome :
a écrit :
A font-stretch definition must be added to the @font-face before this property will function.
oui j'avais essayé çà aussi:

html, body {
margin: 0;
padding: 0;
width: 100%;
font-size: 100%;
font-family: system-ui, sans-serif;
font-stretch: condensed;
}
@font-face {
.font-stretch: condensed;
}


mais çà ne marche pas non plus.
Modérateur
Bah là le font-face n'est relié à rien du tout...

@font-face {
  src: url('fonts/LeagueMonoVariable.ttf');
  font-family:'LeagueMonoVariable';
  font-style: normal;
  font-stretch: 1% 500%; /* Required by Chrome */
}

.container {
  font: 1.5rem 'LeagueMonoVariable', sans-serif;
}

.condensed {
  font-stretch: 50%;
}

.normal {
  font-stretch: 100%;
}

.expanded {
  font-stretch: 200%;
}


Il faut le relier à ta font. Ou est-ce que tu déclares system-ui ?


Et sinon tenter avec 75% au lieux du mot clé condensed.
Modérateur
Bonjour,

L'exemple ci-dessous fonctionne avec Chrome (Mac OS) :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1">
<title>Test</title>
<style>

@font-face
{
  src: url('LeagueMono-VF.ttf');
  font-family:'x';
  font-style: normal;
  font-stretch: 1% 500%; /* Required by Chrome */
}

.container {
  font: 1.5rem 'x', sans-serif;
}

.condensed {
  font-stretch: 50%;
}

.normal {
  font-stretch: 100%;
}

.expanded {
  font-stretch: 200%;
}
</style>
</head>

<body>
<div class="container">
  <p class="condensed">Maman, je n'ai rien aux dents.</p>
  <p class="normal">Maman, je n'ai rien aux dents.</p>
  <p class="expanded">Maman, je n'ai rien aux dents.</p>
</div>
</body>
</html>

Edit: il faut évidemment télécharger LeagueMono-VF.ttf et ici, je l'ai mis dans le même dossier que celui de la page html. Attention, ça ne marche pas avec n'importe quelle police.

Amicalement,
Modifié par parsimonhi (29 Aug 2022 - 09:51)
ok, çà fonctionne mais faut une fonte variable,
un peu lourd pour condenser une fonte
quitte a charger une fonte, autant charger une fonte condensée.

alors que pour safari et FF c'est plus simple

<style>
.container {font: 1.5rem 'system-ui';}
.condensed {font-stretch: 50%;}
.normal {font-stretch: 100%;}
.expanded {font-stretch: 200%;}
</style>
</head>
<body>
<div class="container">
  <p class="condensed">Maman, je n'ai rien aux dents.</p>
  <p class="normal">Maman, je n'ai rien aux dents.</p>
  <p class="expanded">Maman, je n'ai rien aux dents.</p>
</div>
merci, mais un code spécifique pour tel ou tel navigateur on en a eu assez avec msie.
vive la simplicité.
Sujet clos
Aller à