CSS中的Roboto字体

Question

我想在prestashop中使用"Roboto"字体.我收到了.psd文件中的设计和图形设计器使用的字体"Roboto Medium"和"Roboto Regular".我是否理解正确,当我想使用Roboto Normal时,我可以申请:

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

当我想使用Roboto Medium时,我应该申请:

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

换句话说,权重400和500分别等于Roboto Normal和Roboto Medium？

Answer 1

确保关闭CSS行.

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

是的,你的体重是正确的,

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

请阅读此内容font-weight,根据字体的不同,它并不总是可用.但是,根据谷歌的说法,你应该可以毫无问题地使用这些权重.

Answer 2

我最初也对此感到有些困惑。

我有一个客户请求，根据他们的风格指南，我需要为“Roboto”、“Roboto Medium”、“Roboto Light”等设置相应的字体。

查看 Google 的字体站点 ( https://fonts.google.com/specimen/Roboto ) 他们展示了“Roboto”字体，然后是“Medium”、“Light”等每个变体的示例。

但这并不明显，这涉及 CSS 中的两个设置。我最初的想法是你这样设置：

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

但是经过实验和一点研究，它涉及两个设置，一个指定核心“家庭”，然后变化是“权重”，如下所示：

.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 */