如何使用“ems”更改网页字体大小(HTML)

当你在构建一个网页时，大多数专业人士建议你使用相对的度量，如ems, ex，百分比或像素来调整字体(事实上，所有字体)的大小。这是因为您真的不知道别人可能查看您的内容的所有不同方式。如果使用绝对度量(英寸、厘米、毫米、点或picas)，它可能会影响页面在不同设备上的显示或可读性。和W3C推荐你用ems表示尺寸。

但em到底有多大?

根据W3C一个新兴市场:

，等于所使用元素的'font-size'属性的计算值。例外情况是，当'em'出现在'font-size'属性本身的值中时，它指的是父元素的字体大小。”

换句话说，ems没有绝对大小。它们的大小取决于它们所处的位置。对于大多数网页设计师，这意味着它们位于Web浏览器中，因此1em高的字体大小与该浏览器的默认字体大小完全相同。

但是默认大小是多少呢?没有办法100%确定，因为客户可以改变他们的默认字体大小在他们的浏览器中，但由于大多数人不这样做，你可以假设大多数浏览器的默认字体大小是16px。大多数时候都是这样1 em = 16 px。

用像素来思考，用ems来衡量

一旦您知道默认字体大小是16px，您就可以使用ems来允许您的客户端轻松地调整页面大小，但是要考虑像素你的字体大小。假设你有一个这样的大小结构:

• 标题1 - 20px
• 标题2 - 18px
• 标题3 - 16px
• 主文本- 14px
• 子文本- 12px
• 脚注- 10 px

你可以用像素来定义它们，但是任何使用ie6和ie7的人都不能很好地调整页面的大小。所以你应该将大小转换为ems，这只是一些数学问题:

• 标题1 - 1.25em (16 x 1.25 = 20)
• 标题2 - 1.125em (16 × 1.125 = 18)
• 标题3 - 1em (1em = 16px)
• 主文本- 0.875em (16 x 0.875 = 14)
• Sub text - 0.75em (16 x 0.75 = 12)
• 脚注- 0.625em (16 x 0.625 = 10)

别忘了继承!

但这并不是ems的全部。你需要记住的另一件事是它们具有父母的规模。因此，如果嵌套的元素具有不同的字体大小，那么最终得到的字体可能比预期的大或小得多。

例如，你可能有这样一个样式表:

这将导致主文本和脚注的字体分别为14px和10px。但如果你在段落中加入脚注，你最终得到的文本可能是8。75像素而不是10像素。你自己试试CSS和下面的HTML文件:

因此，当您使用ems时，您需要非常注意父对象的大小，否则您将在页面上得到一些非常奇怪的元素。