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？

- Jarosław Rewers

---

我认为你需要首先通过@font-face加载这两种字体，这样你就可以在@font-face块内指定每个字体的font-weight。 - Hashem Qolami

@HashemQolami，我已经完成了 - 我将<link href="http://fonts.googleapis.com/css?family=Roboto:400,500,700&subset=latin-ext" rel="stylesheet" type="text/css">粘贴到头部。 - Jarosław Rewers

没错，JaroslawRewers。不需要使用@font-face。 - EternalHour

不，normal和medium以及thin和bold是不同的Roboto字体变体，对应于不同的ttf文件。通过设置字体权重，您只需将其设置为默认变体权重。您不会改变字体外观。 - netalex

Answer 1

确保你在CSS代码中添加了闭合标签。

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

是的，你的权重是正确的。

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

请阅读此文，了解关于font-weight的内容。 根据Google的说法，您应该可以毫无问题地使用这些字重。

- EternalHour

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

- Gary Richter

---

附加说明：如果我们必须通过CSS指定字重，我不确定为什么（使用Google字体时）我们还必须“下载”要使用的适当字重（我认为字体只是“字体”，CSS字重控制强度类似于应用BOLD）。所以我想通用下载，根据需要调整字重。不确定为什么不是这种情况。以下是我如何获取Roboto字体的轻、正常和中等字重：<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet"> - Gary Richter

这是因为对于像Roboto这样的字体集，中等大小在形状上与普通和粗体不仅在重量上可见不同。 - netalex