跳转至

字体分类

概述

目前还没有一种统一的字体分类方法。因此本文从易于理解的角度,使用 4 个维度对字体进行分类。

简单来说,确定了大小、粗细、样式和字体系列后便确定了一种字体。

font family

字体系列(font family) 表示符合同一种设计风格的字体的集合。比如大名鼎鼎的 Helvetica 字体就因醒目,清晰而广泛应用于广告,宣传语等场合。Time New Roman 也是一种使用非常广泛的字体。

一种字体系列包含多种变体字体,如 Times 包含 TimeIt(倾斜), TimeBd(加粗) 等。我们口语中说的某一种字体,其实通常说的是一种字体系列。

而对于现有的五花八门的字体系列,可以根据一些特点分成 5 类,也叫通用字体系列(generic font families)。如 Helvetica 就属于无衬线 (sans serif) 字体。

以下是字体系列的 5 种类别

  • Serif 字体:有衬线,意思是在字的笔画开始、结束的地方有额外的装饰,而且笔画的粗细会有所不同。类似于中文中的顿笔。Serif 字体的例子包括 Times、Georgia、Sung or Song(宋体)。

    Glyphs of serif fonts, as the term is used in CSS, tend to have finishing strokes, flared or tapering ends, or have actual serifed endings (including slab serifs). Serif fonts are typically proportionately-spaced. They often display a greater variation between thick and thin strokes than fonts from the 'sans-serif' generic font family.

  • Sans-serif 字体:无衬线,与 serif 相反,没有额外的装饰,而且笔画的粗细差不多。Sans-serif 字体的例子包括 Helvetica、Arial、黑体。

    Glyphs in sans-serif fonts, as the term is used in CSS, tend to have stroke endings that are plain -- with little or no flaring, cross stroke, or other ornamentation. Sans-serif fonts are typically proportionately-spaced.

  • Monospace 字体:等宽字体,也叫 typewrite 字体。它们通常用于模拟打字机打出的文本、老式点阵打印机的输出,甚至更老式的视频显示终端。可以有衬线或没有衬线。Monospace 字体的例子包括 Courier New, Consolas。
  • Cursive 字体:这些字体试图模仿人的手写体。Cursive 字体的例子包括 Zapf Chancery、Author 和 Comic Sans。
  • Fantasy 字体:形状是特别设计的,但仍然表示字符。这样的字体包括 Latin fontsAlpha Geometrique, Critter, Cottonwood, FB Reactor, Studz。

    Fantasy fonts, as used in CSS, are primarily decorative while still containing representations of characters (as opposed to Pi or Picture fonts, which do not represent characters).

术语 typeface 也表示 font family 的意思

font style

字体样式 (font style) 用于强调 (highlight) 文档中的重要概念,使其变得更加可读。

常见的样式有

  • bold
  • italic

    In European typefaces, especially Roman ones, a slope or slanted style is used to emphasize important words. This is called italic type or oblique type.

    'italic' is commonly used to label slanted text, but slanted text may also be labeled as being Oblique, Slanted, Incline, Cursive or Kursiv.

  • underlined

font weight

字体粗细 (font weight) 有不同的分类方法。

Attempts to systematize a range of weights led to a numerical classification first used by Adrian Frutiger with the Univers typeface: 35 Extra Light, 45 Light, 55 Medium or Regular, 65 Bold, 75 Extra Bold, 85 Extra Bold, 95 Ultra Bold or Black.

The TrueType font format introduced a scale from 100 through 900, which is also used in CSS and OpenType, where 400 is regular (roman or plain).

The Mozilla Developer Network provides the following rough mapping[3] to typical font weight names:

Names Numerical values
Thin / Hairline 100
Ultra-light / Extra-light 200
Light 300
Normal / regular 400
Medium 500
Semi-bold / Demi-bold 600
Bold 700
Extra-bold / Ultra-bold 800
Extra-black / Ultra-black 950
Heavy / Black 900

font size

字体大小 (font size) 也叫字号,单位为 pt

One such scheme, invented and popularized by Adobe Systems, refers to the variant fonts by the applications they are typically used for, with the exact point sizes intended varying slightly by typeface:

Poster Extremely large sizes, usually larger than 72 point
Display Large sizes, typically 19–72 point
Subhead Large text, typically about 14–18 point
(Regular) Usually left unnamed, typically about 10–13 point
Small Text (SmText) Typically about 8–10 point
Caption Very small, typically about 4–8 point

css 中设置字体

font-*属性

  • font-family

    serif | sans-serif | monospace | cursive | fantasy | 具体 typeface

    可以指定多个,用逗号隔开,前面的优先级高。推荐先写具体字体,结尾补充一个通用 font family。如 font-family: Arial, sans-serif;

  • font-style

    normal | italic | oblique

  • font-variant

    normal | small-caps

  • font-weight normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
  • font-size

font 属性

依次设置 font-style, font-variant, font-weight, font-size/line-height, font-family

font:italic bold 12px/30px arial,sans-serif;

LaTex 中设置字体

Font size, style, family

Command Output
\tiny F-tiny.png
\scriptsize F-scriptsize.png
\footnotesize F-footnotesize.png
\small F-small.png
\normalsize F-normalsize.png
\large F-large.png
\Large F-large2.png
\LARGE F-large3.png
\huge F-huge.png
\Huge F-huge2.png

Font styles

style command switch command output
medium \textmd{Sample Text 0123} \mdseries F-textmd.png
bold \textbf{Sample Text 0123} \bfseries F-textbf.png
upright \textup{Sample Text 0123} \upshape F-textrm.png
italic \textit{Sample Text 0123} \itshape F-textit2.png
slanted \textsl{Sample Text 0123} \slshape F-textsl.png
small caps \textsc{Sample Text 0123} \scshape F-textsc.png

Default font families

typeface = family command switch command output
serif (roman) \textrm{Sample Text 0123} \rmfamily F-textrm.png
sans serif \textsf{Sample Text 0123} \sffamily F-textsf.png
typewriter (monospace) \texttt{Sample Text 0123} \ttfamily F-texttt.png

Underlined, emphasising

Underlining text is very simple too, use the \underline command:

Some of the greatest 
discoveries in \underline{science} 
were made by accident.

Example of underlined text

Text can be emphasized by using \emph command. Sometimes the \emph command behaves just as \textit, but is not exactly the same:

Some of the greatest \emph{discoveries} 
in science 
were made by accident.

\textit{Some of the greatest \emph{discoveries} 
in science 
were made by accident.}

\textbf{Some of the greatest \emph{discoveries} 
in science 
were made by accident.}

Example of emphasized text

Supporting modern fonts with XeLaTeX

Even though LATEX provides an extensive set of fonts, you may want to use an an external font you really like and you have already installed system-wide, this is possible with XeTeX. XeTeX is a TEX typesetting engine using Unicode and supporting modern font technologies such as OpenType (OTF), TrueType (TTF), Graphite, and Apple Advanced Typography (AAT). The corresponding compilers are xetex and xelatex.

以下代码为 3 种通用字体家族设置了默认的字体。

\usepackage{fontspec}


  %This would work on a standard latex installation, (your local computer) 
  %-----------------------------------------------------------------------
  \setromanfont{Times New Roman}
  \setsansfont{Arial}
  \setmonofont[Color={0019D4}]{Courier New}
  %-----------------------------------------------------------------------

以下代码使用字体文件设置字体

\usepackage{fontspec}


% Times New Roman
\setromanfont[
BoldFont=timesbd.ttf,
ItalicFont=timesi.ttf,
BoldItalicFont=timesbi.ttf,
]{times.ttf}
% Arial
\setsansfont[
BoldFont=arialbd.ttf,
ItalicFont=ariali.ttf,
BoldItalicFont=arialbi.ttf
]{arial.ttf}
% Courier New
\setmonofont[Scale=0.90,
BoldFont=courbd.ttf,
ItalicFont=couri.ttf,
BoldItalicFont=courbi.ttf,
Color={0019D4}
]{cour.ttf}

参考文献

  1. Wikipedia: font
  2. W3C: fonts
  3. Overleaf: Font sizes, families, and styles
  4. Overleaf: Bold, italics and underlining
  5. Overleaf: Supporting modern fonts with XeLaTeX