CSS 中的 Roboto 字体答案

【问题标题】：Roboto font in CSSCSS 中的 Roboto 字体
【发布时间】：2020-07-28 00:40:41
【问题描述】：

我想在 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？

【问题讨论】：

我认为你需要首先通过@font-face 加载这两种字体，所以你可以在@font-face 块中指定每个字体的font-weight。
@HashemQolami，我这样做了 - 我将 fonts.googleapis.com/…" rel="stylesheet" type="text/css"> 粘贴到了头部
没错，JaroslawRewers。不需要@font-face。
no, normal 和 medium ，还有 thin 和 bold 是不同的roboto字体变体，对应不同的ttf文件。通过设置字体粗细，您只需将粗细设置为默认变化粗细。您不会更改字体外观

标签： css fonts

【解决方案1】：

确保关闭 CSS 行。

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

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

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

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

【讨论】：

【解决方案2】：

一开始我也有点困惑。

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

查看 Google 的字体网站 (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 */

【讨论】：

附加说明：如果我们必须通过 CSS 指定权重，我不确定为什么（使用 Google 字体时）我们还必须“下载”我们想要使用的适当权重（我想字体只是一种“字体”和 CSS 权重控制强度，类似于应用 BOLD）。所以我想一般下载，相应的权重。不知道为什么不是这样。以下是我如何获得轻、正常和中等粗细的 Roboto 字体：fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
那是因为对于像roboto这样的字体集，中等大小在形状上也是可见的，不仅在重量上与普通和粗体不同。