Bonjour,

Petit problème, lorsque j'utilise ma font-weight désirée, avec le live VS Code actif, tout se passe bien. Mais lorsque je ne suis pas sur le live et que j'ouvre mon index.html pour vérifier ma font-weight, celle-ci est différente. Or à l'inspecteur c'est exactement le même code. Je vous montre les images, observez le deuxième texte de la carte. ( le problème est pour tout les <p> de ma page, ainsi que les autres pages du site.

/* FONT-FACE */

@font-face {
    font-family: "Roboto";
    src: url(../.././styles/fonts/roboto/Roboto-Thin.ttf) format("truetype");
    font-weight: 200;
}
@font-face {
    font-family: "Roboto";
    src: url(../../styles/fonts/roboto/Roboto-Light.ttf) format("truetype");
    font-weight: 300;
}
@font-face {
    font-family: "Roboto";
    src: url(../../styles/fonts/roboto/Roboto-Regular.ttf) format("truetype");
    font-weight: 400;
}
@font-face {
    font-family: "Roboto";
    src: url(../../styles/fonts/roboto/Roboto-Bold.ttf) format("truetype");
    font-weight: 600;
}


@font-face {
    font-family: 'Shrikhand';
    src: url(../../styles/fonts/shrikhand/Shrikhand-Regular.ttf) format("truetype");
}

// Usage

h1, h2 {
    @include typography_roboto;
}
h3 {
    font-family: 'Shrikhand', Arial, Helvetica, sans-serif;
}
h4 {
    @include typography_roboto ($fontsize-10,$fontweight-300)
}
p {
    @include typography_roboto ($fontsize-10,$fontweight-200);
}
span {
    @include typography_roboto ($fontsize-10,$fontweight-400);
}
button {
    @include typography_roboto ($fontsize-10,$fontweight-400)
}

// MIXIN

@mixin typography_roboto ($fontsize-15: 1.5em,$fontweight-600: 600) {
    font-family:"Roboto", Arial, Helvetica, sans-serif;
    font-weight: $fontweight-600;
    font-size: $fontsize-15;
}

// VARIABLE

/* font-size */
$fontsize-10: 1em;
$fontsize-12: 1.2em;
$fontsize-15: 1.5em;

/* font-weight */
$fontweight-200: 200;
$fontweight-300: 300;
$fontweight-400: 400;
$fontweight-600: 600;

-
Edité par Sarafi 13 septembre 2022 à 14:39:21

Bonjour,

il arrive que les navigateurs soient un peu frileux avec les polices en local, hors serveur local, pour des questions de sécurité. As-tu vérifié quelle est la graisse effectivement appliquée sur ton paragraphe, en regardant par exemple les fichiers chargés sur la page ? Peux-tu installer un serveur, genre une pile LAMP ou bien le logiciel XAMPP par exemple ?

Ça fait chaud au cœur de voir des polices avec leurs multiples graisses appelées bien proprement, avec le même nom, ce n'est pas si courant ces derniers temps

Rien à voir mais les variables dans ton mixin typography_roboto devraient probablement être $fontsize et $fontweight, juste pour la clarté du propos, et leurs valeurs par défaut $fontsize-15 et $fontweight-600 si je comprends bien ton code.

EDIT : ah, je viens de voir que c'est résolu. Faute de clic ou bien tu as effectivement trouvé la cause de ton problème ?

-
Edité par Lamecarlate 13 septembre 2022 à 16:16:44

Merci pour ta réponse très complète et d'avoir pris ce temps ! 

En effet, j'ai trouvé ma réponse dans la journée, je reste persévérant lol.. C'était une simple erreur de destination de fichier:
J'ai écrit: ../../xxxxxxx --> avec le live VS Code il me trouve la police sans problème.
La solution: ../xxxxxx --> Bonne écriture de destination pour interpréter ma police. 
finalement la réponse était très simple, mais justement, si simple que difficile de trouver une réponse !! ;) 

Sinon oui $fontsize-15 / $fontweight-600 sont mes valeurs par défauts car ce sont celles que j'utilise le plus.

-
Edité par Sarafi 14 septembre 2022 à 12:32:06

OK, c'est un comportement étrange de la part de VS Code… un peu trop laxiste, je trouve.

Sarafi a écrit:

Sinon oui $fontsize-15 / $fontweight-600 sont mes valeurs par défauts car ce sont celles que j'utilise le plus.

Oui mais ça ne devrait pas être le nom de tes arguments dans la méthode

Je suggère plutôt :

@mixin typography_roboto ($fontsize: $fontsize-15, $fontweight: $fontweight-600) {
    font-family:"Roboto", Arial, Helvetica, sans-serif;
    font-weight: $fontweight;
    font-size: $fontsize;
}