html - 具有多种样式的字体设置

我有一个关于在本地服务器上设置Roboto字体家族（多种样式）的问题。我们无法链接到这些样式的外部服务。

我搜索并阅读了大量文章，并尝试了很多，但仍然无法使它对我有用。我确定这是我所缺少的简单事物。这是我所拥有的：


目录设置：


html


的CSS
字型
js
sample.html




在字体文件夹中，我有一个名为“ roboto”的文件夹，其中包含所有格式的多种格式。我也有一个名为“ roboto_stylesheet.css”的样式表，该样式表将所有样式的所有@ font-face属性合并到一个位置。该文件位于字体的“ roboto”文件夹中。

在我的sample.html文档中，我具有“ roboto_stylesheet.css”的路径为
    <link href="fonts/roboto/roboto_stylesheet.css" rel="stylesheet">。

我创建了一个名为“ .div1”的示例类，另一个名为“ .div2”的类，其字体系列为“ font-family：roboto_condensedbold;”。和“字体家族：roboto_condensedregular”；分别。

在主体中，我做了一个简单的开发人员，该开发人员称为该类。当我预览时...什么都没有。

如果我从“ roboto_stylesheet.css”中复制@ font-face样式并将其放在文档的开头（同时禁用样式表的链接），则可以很好地预览。

就像我说的，我很确定我缺少一些简单的东西，但看不到它。我的所有道路对我来说都很好。

希望这已经足够清楚地解释了，因为我不能发送链接，因为它违反了政策。

谢谢，
麦可

最佳答案

在roboto_stylesheet.css中声明字体时，应该具有类似的代码。

@font-face {
  font-family: 'RobotoFont'; //use this name to set any text font
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto'), url("<font path>.woff2") format('woff2');
  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}

所以.div1看起来像：

.div1{ font-family: 'RobotoFont'; }

注意：您可以检查一些Google字体声明here。

编辑正如我在您的评论中看到的那样，您在src属性中指定了多个url()。我不确定是否会导致您出现问题，但是最好不要在相同的url()中添加更多的@font-face，而最好使用相同的@font-face名称声明相同的font-family，而只更改源url()。正如我说的那样，我不确定这是否可以解决问题。

编辑2：还检查字体文件是否具有权限755或其他权限，以便可以读取和执行它们

关于html - 具有多种样式的字体设置，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39753100/