CSS的@ font-face local（）将找不到“ regular”和“ bold”以外的其他字体样式

Question

所以...我在PC（linux ubuntu）上安装了一些字体（Roboto），我想使用@font-face在CSS中使用它们，但是当我在local()内定义这些src: ;时，如下所示：例如。 ->

@font-face {
  font-family: 'Roboto';
  src: local('Roboto'), local('Roboto-Regular'), url('Roboto.ttf') format('truetype');
  font-weight: 400;
}

。

问题：

仅有效的字体样式/粗细为-font-weight: 400（regular）和font-weight: 600（bold），但是当我将其更改为font-weight: 500（medium）或其他的，只是不变！

。

我尝试解决此问题的方法：

1]定义另一个@font-face

@font-face {
  font-family: 'Roboto';
  src: local('Roboto Medium'), local('Roboto-Medium'), url('Roboto-Medium.ttf') format('truetype');
  font-weight: 500;
}

结果：控制台错误：Failed to decode downloaded font: pathToMySite/css/Roboto-Medium.ttf，它保持不变（常规）

[2）我试图列出所有字体，以查看是否真正安装了这些字体（使用linux命令：fc-list | grep "Roboto"，该命令仅输出所有本地安装的字体（其中包含“ Roboto”））

输出：

lots/of/paths/Roboto-Regular.ttf: Roboto:style=Regular
lots/of/paths/Roboto-Italic.ttf: Roboto:style=Italic
lots/of/paths/Roboto-Medium.ttf: Roboto Medium:style=Regular
lots/of/paths/Roboto-MediumItalic.ttf: Roboto Medium:style=Italic
lots/of/paths/Roboto-Bold.ttf: Roboto:style=Bold
lots/of/paths/Roboto-BoldItalic.ttf: Roboto:style=Bold Italic
lots/of/paths/Roboto-Light.ttf: Roboto Light:style=Regular
lots/of/paths/Roboto-LightItalic.ttf: Roboto Light:style=Italic
lots/of/paths/Roboto-Thin.ttf: Roboto Thin:style=Regular
lots/of/paths/Roboto-ThinItalic.ttf: Roboto Thin:style=Italic

（到不同文件夹的路径甚至更多，但是文件名始终相同）

[3）我试图转到linux“ fonts”应用程序，以查看这些字体是否已实际安装。

所有Roboto变体（薄，浅，常规，中等，粗体，黑色）在那里和明显不同（如果中等和常规看起来一样）

4）是的，我使用CTRL + F5刷新了它，是的，我禁用了cache。

长话短说：所有字体都已安装在系统上，但是CSS除了regular和bold粗细以外什么都看不到，还是找不到它们？还是我不知道为什么。

您能帮我解决这个问题吗？谢谢您的帮助！

Answer 1

不要使用本地地址，只能使用网址，例如：

@font-face {font-family: 'Regular'; src: url('fonts/Roboto-Regular.ttf'); }
@font-face {font-family: 'Light'; src: url('fonts/Roboto-Light.ttf'); }
@font-face {font-family: 'Medium'; src: url('fonts/Roboto-Medium.ttf'); }
@font-face {font-family: 'Bold'; src: url('fonts/Roboto-Bold.ttf'); }

CSS：

.my_div{
   font-family: Light;
}