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

时间:2015-07-01 16:46:04

标签: css fonts font-family

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

谢谢,格兰特

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

}

1 个答案:

答案 0 :(得分:0)

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

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

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

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

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

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

在您的计算机(以及安装了Basic Sans Light SF字体的任何其他计算机)上,文本将以该字体显示。在没有安装字体的计算机上,将安装其他一些sans-serif字体(无论操作系统默认是什么)。

您可以使用名为@font-face的CSS技术来解决此限制,以在您的网页中嵌入网络字体。

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

Google Fonts提供了一个开源的Web就绪字体的大型存储库,通过快速CDN托管并可轻松嵌入任何网页。您可以考虑使用通过此服务提供的字体。

如果您拥有网络就绪和许可字体,则可以将其托管在您自己的Web服务器上并手动使用@font-face属性。假设您的字体文件位于名为" fonts"的子文件夹中,下面是一个示例(来自CSS Tricks)。这包括最大可能的浏览器覆盖范围所需的所有文件格式。 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 */
}