Skip to main content

文字字体名称 font-family

Docs

font-family - CSS | MDN (mozilla.org)

CSS 属性 font-family 允许您通过给定一个有先后顺序的，由字体名或者字体族名组成的列表来为选定的元素设置字体。

font-family 属性指定的是一个优先级从高到低的可选字体列表。字体的选定不是在发现用户计算机上安装的列表中的第一个字体时停止。相反，对字体的选择是逐字进行的。也就是说即使某个字符周围都在某个字体中可以显示，但该字符在当前的字体文件中没有适合的图形，那么会继续尝试列表中靠后的字体。（不过这在 Internet Explorer 6 以及之前的版本的 IE 浏览器中不适用。）当一个字体只在某些特定的 font-style、font-variant、或 font-size 属性值下有效时，这些属性的值也可能对字体族 font family 的选择造成影响。

  • font-family 用于设置文字的字体名称

    • 可以设置 1 个或者多个字体名称;
    • 浏览器会选择列表中第一个该计算机上有安装的字体;
    • 或者是通过 @font-face 指定的可以直接下载的字体。

语法​

属性 font-family 列举一个或多个由逗号隔开的字体族。每个字体族由 <family-name> 或 <generic-name> 值指定。

下面的例子列举了两个字体族，其中第一个是 <family-name>，第二个是 <generic-name>：

.foo {
  font-family: "Gill Sans Extrabold", sans-serif;
}

取值​

  • <family-name>：一个字体族的名字。例如 "Times" 和 "Helvetica" 都是字体族名。字体族名可以包含空格，但包含空格时应该用引号。

  • <generic-name>：通用字体族名是一种备选机制，用于在指定的字体不可用时给出较好的字体。通用字体族名都是关键字，所以不可以加引号。在列表的末尾应该至少有一个通用字体族名。以下是该属性可能的取值以及他们的定义。

    • serif：带衬线字体，笔画结尾有特殊的装饰线或衬线。例如：Lucida Bright, Lucida Fax, Palatino, "Palatino Linotype", Palladio, "URW Palladio", serif.

    • sans-serif：无衬线字体，即笔画结尾是平滑的字体。例如， "Open Sans", "Fira Sans", "Lucida Sans", "Lucida Sans Unicode", "Trebuchet MS", "Liberation Sans", "Nimbus Sans L", sans-serif.

    • monospace：等宽字体，即字体中每个字宽度相同。例如， "Fira Mono", "DejaVu Sans Mono", Menlo, Consolas, "Liberation Mono", Monaco, "Lucida Console", monospace.

    • cursive：草书字体。这种字体有的有连笔，有的还有特殊的斜体效果。因为一般这种字体都有一点连笔效果，所以会给人一种手写的感觉。例如，"Brush Script MT", "Brush Script Std", "Lucida Calligraphy", "Lucida Handwriting", "Apple Chancery", cursive.

    • fantasy：Fantasy 字体主要是那些具有特殊艺术效果的字体。例如，Papyrus, Herculanum, Party LET, Curlz MT, Harrington, fantasy.

    • system-ui：从浏览器所处平台处获取的默认用户界面字体。由于世界各地的排版习惯之间有很大的差异，这个通用选项 is provided for typefaces that don't map cleanly into the other generics.

    • math：针对显示数学相关字符的特殊样式问题而设计的字体：支持上标和下标、跨行括号、嵌套表达式和具有不同含义的 double struck glyphs。

    • emoji：专门用于呈现 Emoji 表情符号的字体。

    • fangsong：一种汉字字体，介于宋体和楷体之间。这种字体常用于某些政府文件。

示例​

<p>
  这是一个衬线字体 serif font 的段落。
  <span class="serif"> 这是一个衬线字体 serif font 的段落。 </span>
</p>
<p>
  这是一个无衬线字体 sans-serif font 的段落。
  <span class="sansserif"> 这是一个无衬线字体 sans-serif font 的段落。</span>
</p>
<p>
  这是一个等宽字体 monospace font 的段落。
  <span class="monospace"> 这是一个等宽字体 monospace font 的段落。</span>
</p>
<p>
  这是一个草书字体 cursive font 的段落。
  <span class="cursive"> 这是一个草书字体 cursive font 的段落。</span>
</p>
<p>
  这是一个特殊艺术字体 fantasy font 的段落。
  <span class="fantasy"> 这是一个特殊艺术字体 fantasy font 的段落。</span>
</p>
<p>
  这是一个表情字体 emoji font 的段落。
  <span class="emoji"> 这是一个表情字体 emoji font 的段落。</span>
</p>
<p>
  这是一个数学字体 math font 的段落。
  <span class="math"> 这是一个数学字体 math font 的段落。</span>
</p>
<p>
  这是一个仿宋字体 fangsong font 的段落。
  <span class="fangsong"> 这是一个仿宋字体 fangsong font 的段落。</span>
</p>
http://localhost:3000/font-family.html

这是一个衬线字体 serif font 的段落。 这是一个衬线字体 serif font 的段落。

这是一个无衬线字体 sans-serif font 的段落。 这是一个无衬线字体 sans-serif font 的段落。

这是一个等宽字体 monospace font 的段落。 这是一个等宽字体 monospace font 的段落。

这是一个草书字体 cursive font 的段落。 这是一个草书字体 cursive font 的段落。

这是一个特殊艺术字体 fantasy font 的段落。 这是一个特殊艺术字体 fantasy font 的段落。

这是一个表情字体 emoji font 的段落。 这是一个表情字体 emoji font 的段落。

这是一个数学字体 math font 的段落。 这是一个数学字体 math font 的段落。

这是一个仿宋字体 fangsong font 的段落。 这是一个仿宋字体 fangsong font 的段落。

css-font-family