web-dev-qa-db-fra.com

Roboto police en CSS

J'aimerais utiliser la police "Roboto" dans prestashop. J'ai reçu la conception en fichiers .psd et le graphiste a utilisé les polices "Roboto Medium" et "Roboto Regular". Dois-je bien comprendre que lorsque je veux utiliser Roboto Normal, je peux appliquer:

font- family: "Roboto"
font-weight: 400

et quand je veux utiliser Roboto Medium, je devrais appliquer:

font- family: "Roboto"
font-weight: 500

En d'autres termes, les poids 400 et 500 sont-ils respectivement égaux à Roboto Normal et Roboto Medium?

cssfonts
10
Jarosław Rewers

Assurez-vous de fermer vos lignes CSS.

font-family: "Roboto";
font-weight: 400;

Oui, vos poids sont corrects,

font-weight: 400; //normal
font-weight: 500; //medium
font-weight: 700; //bold

Veuillez lire this concernant font-weight, il n’est pas toujours disponible en fonction de la police. Mais, selon Google , vous devriez pouvoir utiliser ces poids sans problème.

12
EternalHour

Au début, j'étais un peu confus aussi.

J'avais une demande de client et, selon leur guide de style, j'avais besoin de définir les polices en conséquence pour "Roboto", "Roboto Medium", "Roboto Light", etc.

En regardant le site de polices de Google ( https://fonts.google.com/specimen/Roboto ). Ils montrent la police "Roboto", puis des exemples de chaque variante "Moyen", "Clair", etc.

Mais il n'est pas évident que cela implique deux paramètres en CSS. Ma pensée initiale était que vous le définissiez comme ceci:

* {font-family: 'Roboto Light', 'Roboto Medium', 'Roboto', etc}

Mais après des expériences et un peu de recherche, cela implique deux réglages, l’un pour spécifier le noyau de la "famille", puis la variation correspond au "poids" comme ceci:

.Roboto{font-family:'Roboto';font-weight:400;} /* 400 is industry standard for normal */

.RobotoLight{font-familiy:'Roboto';font-weight:300;} /* 300 is industry standard for normal */

.RobotoMedium{font-family:'Roboto';font-weight:500;} /* 500 is industry standard for normal */
0
Gary Richter