【问题标题】:What is correct to specify as CSS font-family value: typeface, font or font-family?什么是正确的指定为 CSS 字体系列值:字体、字体或字体系列?
【发布时间】:2014-02-02 08:44:31
【问题描述】:

这里是字体、字体和字体系列的定义:

  1. 字体是一组字符的设计。
  2. 字体是字体和其他特性(例如大小、间距和间距)的组合。
  3. 字体系列是一组字体,所有字体都相同,但大小、粗细和倾斜度不同。

那么我可以将这 3 个中的哪一个指定为 css font-family 属性的值? 如果我应该只指定 3) 即字体系列,那么当我指定无衬线字体时,浏览器将从用户系统中选择哪种无衬线字体来显示内容?用户系统上可以有很多无衬线字体。

提前致谢, 苏仁

【问题讨论】:

    标签: css fonts


    【解决方案1】:

    没有。 font-family 的值是字体系列的逗号分隔列表(按优先顺序)。字体系列是一组(一个或多个)具有相似设计的字体,通常由印刷师设计,以便它们在风格上保持一致。例如,字体系列 Georgia 包含可能具有名称 Georgia Regular、Georgia Italic、Georgia Bold 和 Georgia Bold Italic 的字体。字体的名称可能与语言有关,并不打算在 CSS 中使用。相反,您使用各种 CSS 结构来选择字体;例如,font-style: italic 从正在使用的字体系列中选择一个斜体字体(或者,如果它没有这样的字体,可以通过在常规字体中倾斜字形来创建“仿斜体”)。

    标识符sans-serif 表示所谓的通用无衬线字体系列。这意味着依赖于浏览器的字体系列。浏览器有默认设置,用户可以在浏览器设置中更改(尽管很少有人知道和关心这一点)。

    【讨论】:

      【解决方案2】:

      在 CSS 中使用 font-family 时,最好构建一个“字体堆栈”。 This website 为您提供了一些标准字体,您无需下载任何额外字体即可使用。

      字体堆栈的思想是用户计算机在列表(堆栈)中查找第一个字体,如果找不到,它将移动到列表中的下一个字体

      举个例子:

      font-family: 'Open Sans', Arial, "Helvetica Neue", Helvetica, sans-serif;
      

      首先查找字体“Open Sans”。如果找不到,它会移动到“Arial”等等。就在最后,看起来像另一个字体名称“sans-serif”。有点混乱,因为这是一种类型,而不是字体的名称。在大多数系统上,这仅意味着无衬线字体将退回到您最基本的无衬线字体(在大多数情况下,这基本上只是 Windows 上的 Arial,可能是 Mac 上的 Helvetica)。了解它的最佳方式就是尝试一下!

      【讨论】:

        【解决方案3】:

        我不完全确定问题的第一部分是什么意思。但是,如果你写:

        p{
        font-family: sans-serif;
        }
        

        那么您没有指定特定字体,仅指定默认的无衬线/衬线字体。浏览器将选择浏览器内置的默认浏览器(例如,在 Mac 的情况下,这将是 Helvetica,Windows 将默认为 Arial)或已由用户指定 - 仅在以下情况下由用户覆盖他们在浏览器中更改了默认设置。

        如果要使用特定字体,则必须指定该字体。在行尾添加“sans-serif”或“serif”是一种很好的做法,因为它会使页面回退到默认字体。

        例如:

         p {
                font-family: 'Lobster font', 'Tahoma', sans-serif;
          }
        

        在本例中,我们查找“龙虾字体”,如果找不到,我们会查找“Tahoma”,如果找不到,则回退到浏览器默认设置。

        【讨论】:

        • 表达式'sans-serif' 表示具有专有名称sans-serif 的字体系列。顺便说一句,这样的字体不存在。不带引号的表达式sans-serif 表示依赖于浏览器的(通用)字体系列。
        • 已修改以反映这一点。
        猜你喜欢
        • 2011-06-13
        • 1970-01-01
        • 1970-01-01
        • 2013-08-02
        • 1970-01-01
        • 2018-06-14
        • 2020-12-15
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多