tumblr 和硬编码之间的字体大小差异

Question

我有一个奇怪的问题...当我将我在我的服务器上编码的网站上的两个元素与我在他们的服务器上创建的 tumblr 网站进行比较时，存在 2px 的字体大小差异。

两个站点都有此代码：

<body>
<h1>Text</h1>

我没有在任何地方设置字体大小，但正文 css 代码是：

body {
    font-family: Arial;
    font-size: 100%;
    color: #000;
    background: #FFF;
    width: 4100px;
    padding: 0;
    margin: 0;
}

并且两个 h1 代码都是：

h1 {
    font-size: 100%;
    font-weight: normal;
    margin: 0.67em 0 0.67em 0;
}

出于某种原因，tumblr 站点的字体大小相差 2px（较小）。有什么已知的原因吗？

编辑我已经为两个 html 属性添加了 16px 的基本字体大小，但是似乎仍然存在大约 2px 的差异。一些来源链接：

服务器： http://goo.gl/PfyQ6r

微博： http://goo.gl/5gDfp4

Answer 1

我相信默认的字体大小是 16px，通常在正文中定义。

像bootstrap这样的流行框架在正文中将字体大小设置为14px。

这可能就是存在差异的原因，因为默认字体大小是您指定 100% 时使用的字体大小。 Tumblr 自己的 css 文件，与你的完全无关，默认指定为 14px。

Answer 2

Tumblr 的 global.css 文件如 AR7 所述设置为 14px，大多数浏览器中的默认 html 字体大小为 16px，但也可由用户定义。

html, body {
    font-family: "Helvetica Neue","HelveticaNeue",Helvetica,Arial,sans-serif;
    font-weight: 400;
    line-height: 1.4;
    font-size: 14px;
    font-style: normal;
    color: #444;
}

您的问题代码示例将 body font-size 从其父级 (html) 继承为 100%。如果您没有指定 html 字体大小，它将继承浏览器定义的默认字体大小为 100%。

tumblr 和硬编码之间的字体大小差异

font size discrepancy between tumblr and hard coded

html

css

font-size