CSS中的Roboto字体

时间:2014-11-04 08:14:49

标签: css fonts

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

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

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

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

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

2 个答案:

答案 0 :(得分:12)

确保关闭CSS行。

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

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

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

关于font-weight,请阅读this,但根据字体的不同,它并不总是可用。但是,根据Google,您应该可以毫无问题地使用这些权重。

答案 1 :(得分:1)

最初我也对此感到困惑。

我有一个客户要求,根据他们的风格指南,我需要为“ 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 */