字体

首页 > HTML实例讲解 > 字体

改变字体

改变字体使用 <font face="...">

<font face="宋体">宋体文字</font>

用逗号(,)可以指定复数个字体,浏览器如果不支持第一个则会去找第二个,以此类推。

<font face="微软雅黑, 宋体">微软雅黑文字</font>

要改变网页全体的字体,可以使用 <basefont face="..."> 。<basefont> 不是写在 <head>~</head> 之间,而是写在 <body>~</body> 之间。

<html>
<head>
<title>举例</title>
</head>
<body>
<basefont face="宋体">
  :
</body>
</html>

也可以使用 CSS 里的 font-family 来实现。字体名带空格的话,请用引号把字体名括起来。

<span style="font-family:'Times New Roman'">Times New Roman文字</span>

改变文字的大小

改变文字的大小可以使用 <font size=n>n 可以指定 1~7 的整数。通常的大小为 3,数字越小文字越小,数字越大文字越大。

<font size=7>大文字</font>

如果指定 n 为 +2 则会在现在的文字大小的基础上再增大2号,-2 则会使文字缩小2号。-2 需要用引号("...")括起来。

<font size="-2">缩小2号的文字</font>

也可以使用 CSS 里的 font-size 来实现。大小可以指定为百分比形式(如200%)或长度形式(如10pt、1.5em)等。

<span style="font-size: 200%">2倍大小的文字</span>

使文字的大小固定

有些情况下会想要固定文字的大小。Internet Explorer 的话可以在 font-size 里指定 in、cm、mm、pt、pc 等绝对单位,或是指定 px 像素单位。

<span style="font-size: 40px">固定大小的文字</span>

设定文字大小时请注意,尽量让视力不好的人也能看清网页的文字。

设定粗体字

设定粗体字使用 <b> 标签。

<b>粗体字</b>

也可以使用 CSS 里的 font-weight 来实现。

<span style="font-weight:bold">粗体字</span>

如果设定粗体字的目的是为了“强调”的话,推荐使用 <strong> 标签。

<strong>强调的文字</strong>

设定斜体字

设定斜体字使用 <i> 标签。

<i>斜体字</i>

也可以使用 CSS 里的 font-style 来实现。

<span style="font-style:italic">斜体字</span>

如果设定斜体字的目的是为了“强调”的话,推荐使用 <em> 标签。

<em>强调的文字</em>

设定下划线

设定下划线使用 <u> 标签。

<u>下划线文字</u>

也可以使用 CSS 里的 text-decoration 来实现。

<span style="text-decoration:underline">下划线文字</span>

设定下划虚线

设定下划虚线使用 CSS 里的 border-bottom 来实现。

<span style="border-bottom:1px dotted gray">下划虚线的文字</span>

设定删除线

设定删除线使用 <s><strike><del> 标签。

<s>删除线文字</s>
<strike>删除线文字</strike>
<del>删除线文字</del>

也可以使用 CSS 里的 text-decoration 来实现。

<span style="text-decoration:line-through">删除线文字</span>

让文字闪烁

想让文字闪烁的话,可以像下面这样写。

<html>
<head>
<title>文字闪烁</title>
<script type="text/javascript">
<!--
function blink() {
  if (!document.all) { return; }
  for (i = 0; i < document.all.length; i++) {
    obj = document.all(i);
    if (obj.className == "blink") {
      if (obj.style.visibility == "visible") {
        obj.style.visibility = "hidden";
      } else {
        obj.style.visibility = "visible";
      }
    }
  }
  setTimeout("blink()", 800);
}
// -->
</script>
</head>
<body onload="blink()">
<div>这是普通的文字</div>
<div class="blink">这是闪烁的文字</div>
</body>
</html>

在文字的右上、右下写小文字(上标与下标)

要显示像 H2O(水)或 E=mc2 等元素符号和公式的时候,可以使用 <sup><sub> 标签。

H<sub><small>2</small></sub>O
E=mc<sup><small>2</small></sup>