网页设计中字体设置详解

站 很 少使 用 英 文 、数 字 和 英文 符号 ， 那
么 直 接 设置 ｆ０ ｔ ｆｍｉ ：５ ８ ＼ ￣３｝ ｆｎ — ａ ｌ ＼ ｂ ｂ ４ ； ｙ
也 是 很 合 理 的选 择 。
浏 览 器 下 显 示 非 常 不 一 致 ，于 是 就 有
了 类 似 ＹｕＩ的 ｒｓｔ 类 用 来尽 量 重 写 ｅｅ 之 浏 览 器 的默 认 设 置 保 证 各 个 浏 览 器 样 式一致性的做法 。
浏 览 器 、不 同 的 语 言 版 本 甚 至 不 同 的
系 统 版 本 都 有 不 同 的 设 置 ，这 就 导 致 如 果 直 接 利 用 默 认 样 式 的 页 面 在 各 个
字体 ，应 该 是 使 用 最 广 泛 的 网 页 字 体
了 。 它 的 潜在 对 手 ｔｈ ｍａ和 ｈ ｌｅｉａ ａｏ ｅｖ ｔ ｃ 就 没 有这 么 幸 运 了 。
・
・
和 ＣＳ Ｓ一 样 ，后 面 的 优 先 级 高 于 前 面 的 ，也 就 是 说 网 页 定 义 样 式 可 以
覆 盖 浏 览 器 的 默 认 样 式 ．而 用 户 自定
义 样 式 优 先 级 最 高 。 不 过 ， 当有 ！ｉｌ Ｈ＿
所 以 目前 所 有 的 主 流 浏 览 器 都 设 置 使
全 性 ， 如 Ｇｅ・ ｅ的 设 置 为 ｆｎ－ｆｍｉ 比 ｅｌ ｇ ｏｔ ａ 一
上 是 目前 显 示 中 文 唯 一 的 通 用 ｗ ｅ ｂ字 体 ， 以 １ｐ 所 ２ ｘ成 为 最常 用 的 字 体 大 小 。 我 们 当 然 可 以 依 据 产 品 的 需 要 来 修 改 这个默认值 。 ２ 不 用 考 虑 基 于 字 体 大 小 （ｍ ） ． ｅ 的 设计。 ３在 Ｃ ｒ ｍｅ ． 之 后 的 中 文 版 中 ， ． ｈｏ ３０ 字 体 大 小 最 小 值 是 １ｐ ２ ｘ，比 如 你 设 置
第二层是网页定义样式 ； 第三 层 是 用 户 自定 义 样 式 。
ｓ ｓ ｓ ｆ 渲染 宋体 ， 致 字体 出现 变 ａ —ｅ 来 ｎ ｒ ｉ 导
形， 这就 是 为 什 么 淘 宝 需 要 在 ｓｎ — ｅ ｆ ａ ｓ ｓｒ ｉ 前 加 上 宋 体 而 Ｇｏ ｇｅ无 需 这 样 做 的 原 ｏｌ 因。 ４因 为 中 文 字 体 的 选 择 非 常 有 限 ， ．
用 宋 体 来 显 示 中文 。Ｂａｄ ｉｕ的 首 页和 搜
的 行 高 是 默 认 字 体 的 １２ １ 。对 于 中 ． 倍 ３
２ 视 觉பைடு நூலகம்设 计 的专 业 人 士 可 能 会 认 ．
为在 Ｗ ｉｄ ｗｓ中使 用 ｔｈ ｌａ、在 Ｍａ ｎｏ ａ ｏｎ ｃ 中使 用 ｈ ｌｅ ｃ ｅｖ ｔ ａ更好 ， 如 淘 宝 的 默 认 ｉ 比 字 体 样 式 是 ｆｎ ： １ｐ ／ Ｔａ ｏ ， ｏ ｔ ２ｘ １ ｈ ｍａ
大 小 ：２ ｘ １ｐ
这 个 值 要 求 可 能 不 同 ， 我们 一般 会 设 但
置 最 常 用 的 为 默 认 值 。 比 如 ＹｕＩ的 ｆｎ ｏ ｔ中 是 ｆｎ ：３ ｘ １２ １ ａｉ１ ｅｖ ｔ ａ ｏ ｔ１ｐ ／ ．３ ｒａ， ｌｅ ｃ ， ｈ ｉ ｃｅｎｓｎ — ｅ ｆ 即 字 体 大 小 默 认 值 是 ｌａ ， ｓ ｓｒ． ａ ｉ １ ｐ 行 高 是 １ ＂ ．３ ＝１ ．０ ｐ 默 认 ３ ｘ， ３ １２ １ ６０ ３ ｘ，
到三层控 制：
・
ｌ ａｉ ， ｎ — ｅｉ ， 是 至 少 在 非 中 文 版 ｖ ｒ ｓ ｓｓ ｆ 但 ： ｄａ ｒ；
的 ｗ ｉ７下 当编 码 是 ＧＢ 时 ，Ｅ８会 因 ｎ Ｋ Ｉ
行 高 ：． 。 １５倍
１这 是 一 个 经 验 值 ， 同 的产 品对 ． 不
第 一层 是 浏 览 器 的 默 认 样 式 ；
网 络
ｉ 。 “ ８
／
。 晒 涠 卿礤＿
计 舁 Ｌ 与 网 珞 刨 新 生 ￣ 古
网 页 设 计 中 字 体 设 置 详 解
浏 览 器 默 认 的 样 式 往 往 在 不 同 的 １Ｗｉｄ ｗｓ和 Ｍａ ． ｎｏ ｃ都 预 装 了 这 款 问题 只 出现 在 Ｉ Ｅ上 。 以 。 果 你 的 网 所 如
一
Ｈｅ ｅ ｃ ，Ａｒ ｌ “ ５ ８ ＼ ｆ３ ，ｓ ｓ ｌ ｔａ ｖｉ ｉ ， ＼ ｂ ｂ ４５ ” ａ 一 ａ ｎ ｓ ｆ 是 一 个 很 不 错 的 选 择 ， 是 你 也 ｅ ； ｉ ｒ这 但 会 发 现 Ｇｏ ｇ 、 Ａ ｏ ｌ Ｙ ＨＯＯ、 ｕｕ ｅ Ｂ ｎ ｅ Ｙｏ ｔｂ 、 ｉｇ 甚 至 ＭＳ 的 新 版 都 使 用 ａ ａ 作 为 第 Ｎ ｒｌ ｉ 一 默 认 字 体 。 所 以 从 美 观 和 可 读 性 上 来 讲 ，ｒ ｌ 该 是 完 全 可 以接 受 的 。 ａｉ 应 ａ ３ ．一 般 情 况 下 设 置 ｆｎ — ｍ ｌ ｏｔｆ ｉ ａ ｙ都 会 在 最 后 设 置 通 用 字 体 族 以 保 证 其 安
１ ２ ｘ是 宋 体 能 显 示 的 极 限 ． ．１ｐ 虽 然 微 软 雅 黑 能 显 示 更 小 的 字体 。 目前 但 的 应 用 环 境 尚 未 成 熟 。 由 于 宋 体 基 本
拿字体来说 ， 个浏览器默认 的字 各 体 种 类 、字 体 大 小 和 字 体 行 高 都 不 一 样 ，比如 Ｉ ８的 中 文版 在 Ｗｉｄ ｗｓ Ｐ Ｅ ｎｏ Ｘ 下 显 示 网 页 时 默 认 字 体 是 宋 体 ，而 英 文 版 肯 定 不 会 如 此 。所 以 我 们 需 要 统
最 小 字 体 为 １ｐ 最 后 也 变 成 １ｐ ０ ｘ， ２ ｘ。
设 置 默 认 的 字 体 样 式 ，以 便 实 现 一
致 的 显 示 效 果 来 保 证 设 计 的 一 致 性 和 提 高 开发 效 率 。
样 式 优 先 级
通 常 用 户 看 到 的 页 面 的 样 式 会 受