html - CSS 的@font-face local() 不会定位除 "regular"和 "bold"之外的其他字体样式

Question

所以...我在我的 PC (linux ubuntu) 上安装了一些字体 (Roboto)，我想使用 @font-face 在我的 CSS 中使用它们，但是当我定义那些 local() inside 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;
}

结果: 控制台错误:无法解码下载的字体: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“字体”应用程序，查看是否实际安装了这些字体。

所有 Roboto 变体(薄、轻、常规、中等、粗体、黑色)是否存在并且明显不同(以防medium 和 regular 看起来一样)

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

长话短说:系统上安装了所有字体，但 CSS 除了regular 和bold weight 之外什么都看不到或者找不到他们？或者我不知道为什么。

你能帮我解决这个问题吗？谢谢你的帮助!

Answer 1

不要使用本地，只需使用 url，如:

@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;
}