【问题标题】:font size discrepancy between tumblr and hard codedtumblr 和硬编码之间的字体大小差异
【发布时间】:2015-03-05 16:45:48
【问题描述】:

我有一个奇怪的问题...当我将我在服务器上编码的网站上的两个元素与我在他们的服务器上创建的 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

【问题讨论】:

  • 你能把我们链接到这两个例子吗?字体大小 100% 会受到继承的影响。
  • html 元素的 css 中的字体大小声明是什么?您可以使用浏览器中的开发者工具查看计算值。
  • 我删除了 Tumblr 标签。 Tumblr 不提供任何会改变字体大小的 CSS。在 Chrome 中,两个站点都显示16px: i.imgur.com/j0InKk3.png 的字体大小

标签: html css font-size


【解决方案1】:

AR7 中提到的 Tumblr 的 global.css 文件设置为 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%。

【讨论】:

    【解决方案2】:

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

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

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

    【讨论】:

    • 虽然这可能是真的,但原始问题中没有证据表明情况确实如此。这个“答案”作为评论会更好。
    • 我很抱歉没有发布任何代码,但如果你去看看,情况确实如此。
    • 不需要代码,同样,问题中没有任何内容表明 OP 的非 Tumblr 代码中的任何基本字体大小。话虽如此,这似乎确实是罪魁祸首。
    猜你喜欢
    • 2010-12-03
    • 2015-03-17
    • 2019-12-08
    • 2012-09-23
    • 2011-01-19
    • 2011-02-09
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多