CSS中的Roboto字体

Question

我想在prestashop中使用"Roboto“字体。我收到了.psd文件中的设计和平面设计师使用的字体“机器人中”和“机器人常规”。我是否正确理解，当我想使用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的this，根据字体的不同，它并不总是可用的。但是，根据Google的说法，你应该能够毫无问题地使用这些权重。

Answer 2

一开始我也对此感到有点困惑。

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

看看谷歌的字体网站( https://fonts.google.com/specimen/Roboto )，他们显示了"Roboto“字体，然后是它的每一个变体的例子”中“，”轻“等。

但这涉及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 */