Question

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

我已经搜索并阅读了大量的文章并尝试过很多但仍然没有让它为我工作。我确信这很简单，我很想念。这就是我所拥有的：

目录设置：
- HTML
  - CSS
  - 字体
  - JS
  - sample.html

在fonts文件夹中，我有一个名为“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为“font-family：roboto_condensedbold;”和“font-family：roboto_condensedregular;”分别

在我的身体里，我做了一个简单的开发人员，称之为班级。当我去预览......没什么。

如果我从“roboto_stylesheet.css”中删除@ font-face样式并将其放在文档的头部（同时禁用样式表的链接），则预览正常。

就像我说的那样，我很确定我错过了一些简单但却看不到的东西。我的所有路径看起来都很好。

希望这很清楚，因为我不能发送链接，因为它违反了政策。

谢谢，迈克尔

Answer 1

当您在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'; }

注意：您可以查看一些谷歌字体声明here。

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

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

具有多种样式的font-face设置

1 个答案: