Basic Sans Light SF 字体可以与 CSS 一起使用吗？答案

【问题标题】：Can the Basic Sans Light SF font be use with CSS?Basic Sans Light SF 字体可以与 CSS 一起使用吗？
【发布时间】：2015-07-01 16:46:03
【问题描述】：

我想知道 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;

}

【问题讨论】：

到目前为止，您应该发布您的 css 代码。还应该如何帮助找出代码的问题？
关于在 Web 中使用字体：始终牢记字体必须在客户端系统可用，因此在执行浏览器的位置而不是在服务器端.这意味着您要么使用非常广泛的字体，要么必须将字体打包到网页中。这也意味着您必须拥有有效的许可证才能使用它。
那么浏览器需要支持字体吗？是这个意思吗？
要么字体必须安装在客户端系统上，要么您必须将其打包并交付到您的页面中，或者您必须引用可用字体的公共 URL，例如 google web fonts .您不能只命名一种字体并期望它可以在所有浏览器中神奇地使用。
啊，好吧，我想我现在明白了，只是出于好奇，您知道 Google 字体是否支持我想要 Basic Sans Light SF 的字体吗？我认为公共 URL 是最好的选择。

标签： css fonts font-family

【解决方案1】：

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

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

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

serif - 任何带有衬线的中性字体。
sans-serif - 任何没有衬线的中性字体。
等宽 - 所有字符宽度相同的任何字体。
cursive - 任何模拟手写的字体（定义松散）。
fantasy - 任何带有艺术色彩的装饰性字体（定义松散）。

在通用家族名称之外，您可以在引号中指定特定字体。如果您的计算机上安装了名为“Basic Sans Light SF”的字体，则可以使用以下 CSS 属性：

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

在您的计算机（以及安装了 Basic Sans Light SF 字体的任何其他计算机）上，文本将以该字体显示。在没有安装字体的计算机上，将使用安装其他一些无衬线字体（无论操作系统默认设置是什么）。

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

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

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

如果您拥有可用于网络且获得许可的字体，则可以将其托管在您自己的网络服务器上并手动使用 @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 */
}

【讨论】：

非常感谢！现在说得通了。