CSS @font-face local() 找不到除“常规”和“粗体”以外的其他字体样式答案

【问题标题】：CSS's @font-face local() won't locate other font styles than "regular" and "bold"CSS @font-face local() 找不到除“常规”和“粗体”以外的其他字体样式
【发布时间】：2019-08-23 00:40:12
【问题描述】：

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

@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的“字体”应用，看看这些字体是否真的安装了。

所有 Roboto 变体（细、轻、常规、中等、粗体、黑色）都存在并且明显不同（以防 medium 和 regular 看起来一样）

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

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

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

【问题讨论】：

Protip：如果您真的很在意您的排版以使用@font-face 规则，请不要使用local。你想控制字体，所以不要去“或者，不管你安装了什么，碰巧有相同的名字，我不在乎”。你关心：enforce 确切的字体 =) 至于错误：don't use ttf。获取 Roboto 的 .woff 源，然后使用它，仅此而已。

标签： html css fonts font-face local

【解决方案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;
}

【讨论】：