网页中设置 Font-size 的那些事儿 - 文章教程

网页中设置 Font-size 的那些事儿

发布于 2018-09-23 字数 3505 浏览 2345 评论 0

一听到说使用 CSS 设置字体很容易,其实要是真做起来却不那么容易,我们的网站开发人员使用全力,不断的去调整字体的大小尺寸,以适应不同浏览器最佳的显示效果。实际上只要深入的理解一下字体中的一些知识,这些都不是问题了。

网页中设置 Font-size 的那些事儿

Font-size 属性

任何一个 HTML 标签都可以设置 Font-size 属性,即使是不能包含文本的标签也可以设置它,他可以被赋予各种各样的值,可以是具体的数字+单位,也可以绝对关键字,也可以是百分数相对大小。

一个元素的 Font-size 属性会自动继承它父节点元素的 Font-size 属性值,除非你覆盖了它。当你给 Font-size 设置相对大小的时候理解这一点很重要。

以下几个绝对字体大小的设置是有效的。当然他们是浏览器预定义设置的。给元素指定了绝对关键字 Font-size 的时候,该元素就不会继承父元素的 字体大小。

font-size: xx-small;
font-size: x-small;
font-size: small;
font-size: medium;
font-size: large;
font-size: x-large;
font-size: xx-large;

尽管大多数的浏览器支持上面的关键字,但是他们的精确的大小是不相同的。

Font-size 绝对大小

Fone-size 能被设置成下面列出的绝对大小:

  • mm: 毫米,例如:10mm.
  • cm: 厘米 ,例如:1cm ( = 10mm).
  • in: 英寸(inch),例如 : 0.39in ( ~= 10mm).
  • pt: point(点), 1pt 相当于 1/72 英寸, 例如: 12pt.
  • pc: pica(十二点活字), 1pc 是 12pt
  • px: pixel(像素), 例如: 14px.

一般说来上面得这些度量单位都有些问题。比如:毫米\厘米\英寸是对于不同媒体介质是不精确地,由于分辨率的设置不同,pt 和 pc 就是相对不可靠地。pix 来起来是最合适的,但是它能导致一些辅助性问题:IE 下不能重新调整字体的大小。

Font-size 相对大小

Font-size 属性能被设置成相对于父节点的字体大小的相对大小。

  • em: 1em 相当于当前字体的 1 倍大小的字体。2em 相当于当前字体的 2 倍字体大小的字体。
  • %: 100% 相当于当前字体大小, 200% 相当于 2 倍字体的大小。
  • ex: 1ex 相当于当前字体中字母 x 高度值一样大小的字体。

很少的开发者使用 ex ,实际上某些情况下 ex 还是相当好用的,比如当你需要更精确的字体的大小的时候,1ex 要比 0.525em 更好更精确。

% 和 em 的值是等价的,比如 50% = 0.5em\100% = 1em\120% = 1.2em 等等,尽管会有很少的一些浏览器有些微妙的差别,但是毕竟那是很少见的问题。如果你想要保存更小的字节,就需要用更短的名字去定义 Font- size 的值。比如 50% 要比 0.5em 占用字节少,1em 要比 100% 占用的字节少。

文本字体的大小和页面放缩

这是附加复杂深入部分,大多数浏览器允许用户在浏览器中做如下操作:

  • 增加或减少基本字体大小(图片除外)
    页面放缩是所有的文字和图片也相应发生放缩变化。
  • 不但允许字体放缩,而且还允许页面放缩

备注(深入理解):在 IE 中如果页面中的元素的字体被用 px(像素)赋值了,那么该元素的字体在页面放缩的时候不会发生变化。

如果您是有印刷行业背景的设计师将要转移到 Web 设计,那就建议您不要给予用户过多的权利否则他们会打乱您的设计作品。您的设计作品被放大到 200% 的时候,或者字体减少至 50%,就会被破坏掉。

Font-size 设置建议

  • 一般来说,大多数情况下使用 em 或者 %,这样字体就能被浏览器用更精细比例的字体支持。我个人建议使用百分比 % 来定义 Font-size 大小,这种做法在一些老的浏览器中支持的也会更好。
  • 当你在开发一个网站的时候有下面的一组建议提供给您:
    1. 在 Testing 之前,重置所有浏览器的字体的大小。
    2. 尽量合理的定义字体的大小,以便于在页面放缩的时候页面仍然保持良好的可读性

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

Jay

文章 0 评论 0

guowei007

文章 0 评论 0

2668157715

文章 0 评论 0

HY阳

文章 0 评论 0

想挽留

文章 30 评论 3