Basic Sans Light SF 字体可以与 CSS 一起使用吗?

Can the Basic Sans Light SF font be use with CSS?

我想知道 San Basic Sans Light SF 字体是否可以与 CSS 一起使用?我不确定这种字体也属于哪个字体系列,而且似乎无法让它与 CSS 一起使用。到目前为止,我最接近的是使用无衬线字体系列。我想知道是否有人可以指导我如何在 CSS 代码中使用 Basic Sans Light SF。

谢谢,格兰特

#follower-alert .text {
text-shadow: 5px 0px 5px black;
font-family: sans-serif;

}

CSS font-family 属性 告诉浏览器从操作系统加载字体。如果浏览器找不到请求的字体,它会尝试列表中的下一个。它到达列表的末尾,它使用浏览器的默认字体。

这意味着,当使用 font-family 属性 指定特定字体时,您只是请求客户端使用该字体 如果客户端有该字体安装。如果您请求 Helvetica,但访问您网站的人尚未安装 Helvetica,浏览器将退回到下一个选项。

有一些关键字没有指定特定的字体,而是告诉浏览器加载它认为最适合该类别的字体。大多数浏览器加载操作系统默认的指定类别。这些关键字(称为通用姓氏)如下:

  • serif - 任何具有衬线的相当中性的字体。
  • sans-serif - 任何没有衬线的相当中性的字体。
  • monospace - 所有字符宽度相同的任何字体。
  • cursive - 任何模拟手写的字体(这是松散定义的)。
  • fantasy - 任何具有艺术气息的装饰字体(这是松散定义的)。

在通用系列名称之外,您可以在引号中指定特定字体。如果您的计算机上安装了一种名为 "Basic Sans Light SF" 的字体,您可以使用以下 CSS 属性:

font-family: "Basic Sans Light SF", sans-serif;

在您的计算机(以及任何其他安装了 Basic Sans Light SF 字体的计算机)上,文本将以该字体显示。在没有安装该字体的计算机上,将使用安装的一些其他无衬线字体(无论 OS 默认是什么)。

您可以使用称为 @font-face 的 CSS 技术在您的页面中嵌入网络字体来绕过此限制。

在页面中嵌入字体 slows down load times 但会提高一致性。由于 Web 字体是一项新技术,因此存在在不同设备上具有不同级别支持的相互竞争的文件格式。为了全面覆盖,您使用的字体应该针对网络进行优化,并且您应该在您的服务器上包含相同字体的多种格式。您还需要确保您使用的字体是开源的或已获得许可供您在网络上使用。

Google Fonts 提供大型开源网络字体库,通过快速 CDN 托管,可轻松嵌入任何网页。您可以考虑使用通过此服务提供的字体。

如果您有可用于网络且已获得许可的字体,您可以将其托管在您自己的网络服务器上并手动使用 @font-face 属性。假设您的字体文件位于名为 "fonts" 的子文件夹中,一个示例(来自 CSS Tricks) is below. This includes all the file formats needed for the maximum possible level of browser coverage. This page 详细介绍了可用的不同类型的网络字体文件格式以及每种格式的优缺点。

@font-face {
  font-family: 'Basic Sans Light SF';
  src: url('fonts/BasicSansLightSF.eot'); /* IE9 Compat Modes */
  src: url('fonts/BasicSansLightSF.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/BasicSansLightSF.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/BasicSansLightSF.woff') format('woff'), /* Pretty Modern Browsers */
       url('fonts/BasicSansLightSF.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('fonts/BasicSansLightSF.svg#basicSansLightSF') format('svg'); /* Legacy iOS */
}