CSS Font 字体

前言

  • CSS 字体属性定义字体,加粗,大小,文字样式。
属性 描述 CSS 备注 🔗
font 在一个声明中设置所有的字体属性 1 🔗
font-family 指定文本的字体系列 1 🔗
font-size 指定文本的字体大小 1 🔗
font-style 指定文本的字体样式 1 🔗
font-variant 以小型大写字体或者正常字体显示文本 1 🔗
font-weight 指定字体的粗细 1 🔗
@font-face 一个规则,允许网站下载并使用其他超过 “Web- safe” 字体的字体 3 🔗
font-size-adjust 为元素规定 aspect 值 3 🔗
font-stretch 收缩或拉伸当前的字体系列 3 🔗

1、字型

  • 在 CSS 中,有两种类型的字体系列名称:

    • 通用字体系列 - 拥有相似外观的字体系统组合(如 “Serif” 或 “Monospace”)
    • 特定字体系列 - 一个特定的字体系列(如 “Times” 或 “Courier”)
Generic family 字体系列 说明
Serif Times New Roman
Georgia
Serif 字体中字符在行的末端拥有额外的装饰
Sans-serif Arial
Verdana
“Sans” 是指无 - 这些字体在末端没有额外的装饰
Monospace Courier New
Lucida Console
所有的等宽字符具有相同的宽度
  • 在计算机屏幕上,sans-serif 字体被认为是比 serif 字体容易阅读。

  • Sans-serif 字体比较适合在屏幕上阅读,而 Serif 字体更容易在纸上阅读。

2、简写属性

属性 描述 CSS 备注 🔗
font 在一个声明中设置所有的字体属性 1 🔗
  • 属性值
描述
font-style 规定字体样式。参阅:font-style 中可能的值
font-variant 规定字体异体。参阅:font-variant 中可能的值
font-weight 规定字体粗细。参阅:font-weight 中可能的值
font-size/line-height 规定字体尺寸和行高。参阅:font-size 和 line-height 中可能的值
font-family 规定字体系列。参阅:font-family 中可能的值
caption 定义被标题控件(比如按钮、下拉列表等)使用的字体
icon 定义被图标标记使用的字体
menu 定义被下拉列表使用的字体
message-box 定义被对话框使用的字体
small-caption caption 字体的小型版本
status-bar 定义被窗口状态栏使用的字体
  • 可设置的属性是(按顺序):

    • font-style
    • font-variant
    • font-weight
    • font-size/line-height
    • font-family
  • font-size 和 font-family 的值是必需的。如果缺少了其他值,默认值将被插入,如果有默认值的话。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <style>
    p.ex1 {
    font: 15px arial, sans-serif;
    }

    p.ex2 {
    font: italic bold 12px/30px Georgia, serif;
    }
    </style>
    1
    2
    3
    4
    5
    6
    <p class="ex1">This is a paragraph. This is a paragraph. This is a paragraph. 
    This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.
    This is a paragraph.</p>
    <p class="ex2">This is a paragraph. This is a paragraph. This is a paragraph.
    This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.
    This is a paragraph.</p>
  • 效果

3、字体系列

  • font-family 属性应该设置几个字体名称作为一种 “后备” 机制,以确保浏览器/操作系统之间的最大兼容性,如果浏览器不支持第一种字体,他将尝试下一种字体。

  • 想要的字体类型如果浏览器找不到,它会从通用的字体类型中找到与你相似的:

属性 描述 CSS 备注 🔗
font-family 指定文本的字体系列 1 🔗
  • 属性值
描述
family-name
generic-family
用于某个元素的字体族名称或/及类族名称的一个优先表。
默认值:取决于浏览器。
inherit 规定应该从父元素继承字体系列。
  • 如果字体系列的名称超过一个字,它必须用引号,如 Font Family:”宋体”。

  • 多个字体系列是用一个逗号分隔指明

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    <style>
    p.serif {
    font-family: "Times New Roman", Times, serif;
    }
    p.sansserif {
    font-family: Arial, Helvetica, sans-serif;
    }
    </style>
    1
    2
    <p class="serif">这一段的字体是 Times New Roman </p>
    <p class="sansserif">这一段的字体是 Arial.</p>
  • 效果

4、字体大小

  • 能否管理文字的大小,在网页设计中是非常重要的。但是,不能通过调整字体大小使段落看上去像标题,或者使标题看上去像段落。

  • 请务必使用正确的 HTML 标签,就 <h1> - <h6> 表示标题和 <p> 表示段落:

属性 描述 CSS 备注 🔗
font-size 指定文本的字体大小 1 🔗
  • 属性值
描述
xx-small
x-small
small
medium
large
x-large
xx-large
把字体的尺寸设置为不同的尺寸,从 xx-small 到 xx-large。
默认值:medium
smaller 把 font-size 设置为比父元素更小的尺寸
larger 把 font-size 设置为比父元素更大的尺寸
length 把 font-size 设置为一个固定的值
% 把 font-size 设置为基于父元素的一个百分比值
inherit 规定应该从父元素继承字体尺寸
  • 字体大小的值可以是绝对或相对的大小。

  • 绝对大小:

    • 设置一个指定大小的文本
    • 不允许用户在所有浏览器中改变文本大小
    • 确定了输出的物理尺寸时绝对大小很有用
  • 相对大小:

    • 相对于周围的元素来设置大小
    • 允许用户在浏览器中改变文字大小
  • 如果你不指定一个字体的大小,默认大小和普通文本段落一样,是 16 像素(16px=1em)。

4.1 设置字体大小像素

  • 设置文字的大小与像素。

  • 设置字体大小像素可以在 Internet Explorer 9, Firefox, Chrome, Opera, 和 Safari 中通过缩放浏览器调整文本大小。

  • 虽然可以通过浏览器的缩放工具调整文本大小,但是,这种调整是整个页面,而不仅仅是文本。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <style>
    h1 {
    font-size: 40px;
    }
    h2 {
    font-size: 30px;
    }
    p {
    font-size: 14px;
    }
    </style>
    1
    2
    3
    <h1>This is heading 1</h1>
    <h2>This is heading 2</h2>
    <p>This is a paragraph.</p>
  • 效果

4.2 用 em 来设置字体大小

  • 为了避免 Internet Explorer 中无法调整文本的问题,许多开发者使用 em 单位代替像素。

  • em 的尺寸单位由 W3C 建议。

  • 1em 和当前字体大小相等。在浏览器中默认的文字大小是 16px。因此,1em 的默认大小是 16px。可以通过下面这个公式将像素转换为 em:

    1
    px/16 = em
  • 用 em 来设置字体大小,em 的文字大小是与前面的例子中像素一样。不过,如果使用 em 单位,则可以在所有浏览器中调整文本大小。

  • 不幸的是,仍然是 IE 浏览器的问题。调整文本的大小时,会比正常的尺寸更大或更小。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <style>
    h1 {
    font-size: 2.5em; /* 40px/16 = 2.5em */
    }
    h2 {
    font-size: 1.875em; /* 30px/16 = 1.875em */
    }
    p {
    font-size: 0.875em; /* 14px/16 = 0.875em */
    }
    </style>
    1
    2
    3
    <h1>This is heading 1</h1>
    <h2>This is heading 2</h2>
    <p>This is a paragraph.</p>
  • 效果

4.3 使用百分比和 em 组合

  • 在所有浏览器的解决方案中,设置 <body> 元素的默认字体大小的是百分比。

  • 在所有浏览器中,可以显示相同的文本大小,并允许所有浏览器缩放文本的大小。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <style>
    body {
    font-size: 100%;
    }
    h1 {
    font-size: 2.5em;
    }
    h2 {
    font-size: 1.875em;
    }
    p {
    font-size: 0.875em;
    }
    </style>
    1
    2
    3
    <h1>This is heading 1</h1>
    <h2>This is heading 2</h2>
    <p>This is a paragraph.</p>
  • 效果

5、字体样式

  • 主要是用于指定斜体文字的字体样式属性。
属性 描述 CSS 备注 🔗
font-style 指定文本的字体样式 1 🔗
  • 属性值
描述
normal 默认值。浏览器显示一个标准的字体样式
italic 浏览器会显示一个斜体的字体样式
oblique 浏览器会显示一个倾斜的字体样式(和斜体非常类似,但不太支持)
inherit 规定应该从父元素继承字体样式
  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <style>
    p.normal {
    font-style: normal;
    }
    p.italic {
    font-style: italic;
    }
    p.oblique {
    font-style: oblique;
    }
    </style>
    1
    2
    3
    <p class="normal">这是一个段落, 正常。</p>
    <p class="italic">这是一个段落, 斜体。</p>
    <p class="oblique">这是一个段落, 倾斜。</p>
  • 效果

6、字体转变

属性 描述 CSS 备注 🔗
font-variant 以小型大写字体或者正常字体显示文本 1 🔗
  • 属性值
描述
normal 默认值。浏览器会显示一个标准的字体
small-caps 浏览器会显示小型大写字母的字体
inherit 规定应该从父元素继承 font-variant 属性的值
  • font-variant 属性设置小型大写字母的字体显示文本,这意味着所有的小写字母均会被转换为大写,但是所有使用小型大写字体的字母与其余文本相比,其字体尺寸更小。

  • font-variant 属性主要用于定义小型大写字母文本。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    <style>
    p.normal {
    font-variant: normal;
    }
    p.small {
    font-variant: small-caps;
    }
    </style>
    1
    2
    <p class="normal">My name is Hege Refsnes.</p>
    <p class="small">My name is Hege Refsnes.</p>
  • 效果

7、字体粗细

属性 描述 CSS 备注 🔗
font-weight 指定字体的粗细 1 🔗
  • 属性值
描述
normal 默认值。定义标准的字符
bold 定义粗体字符
bolder 定义更粗的字符
lighter 定义更细的字符
100
200
300
400
500
600
700
800
900
定义由细到粗的字符。400 等同于 normal,而 700 等同于 bold
inherit 规定应该从父元素继承字体的粗细
  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <style>
    p.normal {
    font-weight: normal;
    }
    p.light {
    font-weight: lighter;
    }
    p.thick {
    font-weight: bold;
    }
    p.thicker {
    font-weight: 900;
    }
    </style>
    1
    2
    3
    4
    <p class="normal">This is a paragraph.</p>
    <p class="light">This is a paragraph.</p>
    <p class="thick">This is a paragraph.</p>
    <p class="thicker">This is a paragraph.</p>
  • 效果

8、常用字体组合

  • 下面是一些常用的字体组合,通用的字体系列。

8.1 Serif 字体




















字体 文本示例
Georgia, serif

This is a heading

This is a paragraph


“Palatino Linotype”, “Book Antiqua”, Palatino, serif

This is a heading

This is a paragraph


“Times New Roman”, Times, serif

This is a heading

This is a paragraph


8.2 sans - serif 字体








































字体 文本示例
Arial, Helvetica, sans-serif

This is a heading

This is a paragraph


Arial Black, Gadget, sans-serif

This is a heading

This is a paragraph


“Comic Sans MS”, cursive, sans-serif

This is a heading

This is a paragraph


Impact, Charcoal, sans-serif

This is a heading

This is a paragraph


“Lucida Sans Unicode”, “Lucida Grande”, sans-serif

This is a heading

This is a paragraph


Tahoma, Geneva, sans-serif

This is a heading

This is a paragraph


“Trebuchet MS”, Helvetica, sans-serif

This is a heading

This is a paragraph


Verdana, Geneva, sans-serif

This is a heading

This is a paragraph


8.3 Monospace 字体
















字体 文本示例
“Courier New”, Courier, monospace

This is a heading

This is a paragraph


“Lucida Console”, Monaco, monospace

This is a heading

This is a paragraph


9、CSS 实例

文章目录
  1. 1. 前言
  2. 2. 1、字型
  3. 3. 2、简写属性
  4. 4. 3、字体系列
  5. 5. 4、字体大小
    1. 5.1. 4.1 设置字体大小像素
    2. 5.2. 4.2 用 em 来设置字体大小
    3. 5.3. 4.3 使用百分比和 em 组合
  6. 6. 5、字体样式
  7. 7. 6、字体转变
  8. 8. 7、字体粗细
  9. 9. 8、常用字体组合
    1. 9.1. 8.1 Serif 字体
    2. 9.2. 8.2 sans - serif 字体
    3. 9.3. 8.3 Monospace 字体
  10. 10. 9、CSS 实例
隐藏目录