CSS Font 字体

前言

• CSS 字体属性定义字体，加粗，大小，文字样式。

• 使用以前 CSS 的版本，网页设计师不得不使用用户计算机上已经安装的字体。

• 使用 CSS3，网页设计师可以使用他/她喜欢的任何字体。

属性	描述	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 的值是必需的。如果缺少了其他值，默认值将被插入，如果有默认值的话。

• 实例

  <style>
      p.ex1 {
          font: 15px arial, sans-serif;
      }
  
      p.ex2 {
          font: italic bold 12px/30px Georgia, serif;
      }
  </style>

  <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：”宋体”。

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

• 实例

  <style>
      p.serif {
          font-family: "Times New Roman", Times, serif;
      }
      p.sansserif {
          font-family: Arial, Helvetica, sans-serif;
      }
  </style>

  <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 中通过缩放浏览器调整文本大小。

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

• 实例

  <style>
      h1 {
          font-size: 40px;
      }
      h2 {
          font-size: 30px;
      }
      p {
          font-size: 14px;
      }
  </style>

  <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：

  px/16 = em

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

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

• 实例

  <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>

  <h1>This is heading 1</h1>
  <h2>This is heading 2</h2>
  <p>This is a paragraph.</p>

• 效果

  

4.3 使用百分比和 em 组合

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

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

• 实例

  <style>
      body {
          font-size: 100%;
      }
      h1 {
          font-size: 2.5em;
      }
      h2 {
          font-size: 1.875em;
      }
      p {
          font-size: 0.875em;
      }
  </style>

  <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	规定应该从父元素继承字体样式

• 实例

  <style>
      p.normal {
          font-style: normal;
      }
      p.italic {
          font-style: italic;
      }
      p.oblique {
          font-style: oblique;
      }
  </style>

  <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 属性主要用于定义小型大写字母文本。

• 实例

  <style>
      p.normal {
          font-variant: normal;
      }
      p.small {
          font-variant: small-caps;
      }
  </style>

  <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	规定应该从父元素继承字体的粗细

• 实例

  <style>
      p.normal {
          font-weight: normal;
      }
      p.light {
          font-weight: lighter;
      }
      p.thick {
          font-weight: bold;
      }
      p.thicker {
          font-weight: 900;
      }
  </style>

  <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、@font-face 规则

• 当发现要使用的字体文件时，只需简单的将字体文件包含在网站中，它会自动下载给需要的用户。

• 所选择的字体在新的 CSS3 版本有关于 @font-face 规则描述。

• “自己的” 的字体是在 CSS3 @font-face 规则中定义的。

• 在新的 @font-face 规则中，必须首先定义字体的名称（比如 myFirstFont），然后指向该字体文件。

• 如需为 HTML 元素使用字体，请通过 font-family 属性来引用字体的名称 (myFirstFont)。

• 提示：URL 请使用小写字母的字体，大写字母在 IE 中会产生意外的结果。

• 实例

  <style>
      @font-face {
          font-family: myFirstFont; /* 自定义一个字体名称 */
          src: url(https://repo.qianchia.com/font/Sansation/Sansation_Light.ttf), 
               url(https://repo.qianchia.com/font/Sansation/Sansation_Light.eot); /* IE9 */
      }
      div {
          font-family: myFirstFont;
      }
  </style>

  <div>
      使用 CSS3, 网站终于可以使用字体以外的预先选择 “合法” 字体
  </div>

• 效果

  
  

  
  使用 CSS3, 网站终于可以使用字体以外的预先选择 “合法” 字体
  

  
  

• 注意: Internet Explorer 9 只支持 .eot 格式的字体。

9.1 使用粗体文本

• 必须添加另一个包含粗体文字的 @font-face 规则。

• 实例

  <style>
      @font-face {
          font-family: myFirstFont;
          src: url(https://repo.qianchia.com/font/Sansation/Sansation_Light.woff);
      }
      @font-face {
          font-family: myFirstFont;
          src: url(https://repo.qianchia.com/font/Sansation/Sansation_Bold.woff);
          font-weight: bold;
      }
      div {
          font-family: myFirstFont;
      }
  </style>

  <div>
      使用 CSS3, 网站终于可以使用字体以外的预先选择 “合法” 字体
  </div>

• 效果

  
  

  
  使用 CSS3, 网站终于可以使用字体以外的预先选择 “合法” 字体
  

  
  

• 解析

  • 该文件 “Sansation_Bold.ttf” 是另一种字体文件，包含 Sansation 字体的粗体字。
  • 浏览器使用这一文本的字体系列 “myFirstFont” 时应该呈现为粗体。
  • 这样就可以有许多相同的字体 @font-face 的规则。

9.2 浏览器支持

属性
@font-face	4.0	9.0	3.5	3.2	10.0

• 表格中的数字表示支持该属性的第一个浏览器版本号。

• 紧跟在 -webkit-, -ms-, -o- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

• Internet Explorer 9+, Firefox, Chrome, Safari, 和 Opera 支持 WOFF (Web Open Font Format) 字体。

• Firefox, Chrome, Safari, 和 Opera 支持 .ttf (True Type 字体) 和 .otf (OpenType) 字体字体类型。

• Chrome, Safari 和 Opera 也支持 SVG 字体/折叠.

• Internet Explorer 同样支持 EOT (Embedded OpenType) 字体.

• Internet Explorer 8 以及更早的版本不支持新的 @font-face 规则。

10、CSS 实例

• 设置文本的字体


• 设置字体大小


• 用 px 设置的字体的大小


• 用 em 设置的字体的大小


• 用百分比和 em 设置字体的大小


• 设置字体样式


• 设置字体的异体


• 设置字体的粗细


• 在一个声明的所有字体属性