引用本地字体

编程问答 2022-05-25

问题描述

通常，我看到人们做这样的事情：

 font-family: -apple-system,....,Tahoma,...,or whatever other system font

现在，如果我们包含来自 Google Fonts 或其他地方的字体，我们会得到一个大的

 @font-face {
      font-family: name;
      src: url() or local(NameWeight-Type),local(Name Weight Type),......
      font-style: style corresponding to "-Type"
      font-weight: weight corresponding to named Weight of font
}

包含所有通过平台选择的嵌入或根据平台本身的请求嵌入。

使用本地字体这还需要吗？意思是，如果我这样做：

 font-family: local font 1,local font 2,....;

如上面在一个典型的“系统字体堆栈”中列出的那样，网站上有一堆字体粗细、样式等。我还需要明确定义还是浏览器只是利用 font-synthesis 来制作这些？

如果没有这个，我看不到它如何引用正确的文件。此外，system-ui,system,ui-sans-serif,ui-serif,.... 如何以这种方式确定性？

解决方法

如果您使用的是本地字体，则没有必要包含额外的粗细/样式，只要它们正常附加到基本字体即可。如果其他应用程序可以弄清楚如何使字体变为粗体/斜体/随便什么，那么您的浏览器也能做到。

请注意，这仅适用于本地字体。您的浏览器需要额外的远程托管字体规范，因为您计算机的字体系统将无法“帮助”它。

,

如果您使用 Visual Studio，只需将其拖放到 css 代码页，它就会显示字体系列名称

fontsfontshtmlwebfonts