1

我在 Chrome/Safari 中很小但可读的页面上有一些文本（这就是我的意图），但由于某种原因在 Firefox 中变得微观。任何人都可以提出修复建议，以便文本在 Firefox 和 IE 中可读吗？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>
    <title>WTF LBJ?!</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>

<style type="text/css">

#credit {font-family: "helvetica"; font-size: 20%; color: black; text-align:center; }

</style>

<body>

    <div id="credit"; >
        Created by <a href="http://www.twitter.com/varunsshetty">Varun Shetty</a> and <a href="http://www.twitter.com/bcfromblo">Bobby Corp</a>. Inspired by LBJ and <a href="http://www.whatthefuckhasobamadonesofar.com">WTF Obama</a>. Bobby loves Lebron; Varun loves the idea of Lebron.<br>
        Sorry for the swear word, but LBJ gets people fired up.
    </div>

</body>

</html>
4

3 回答 3

4

20%等于0.2em, 或字体大小的 1/5。我的猜测是 Chrome / Safari 配置了最小字体大小以保持可读性。尝试将其调整font-size为更高的值，例如0.4em看看它在 Chrome / Safari 中是否真的变大了。如果没有，您刚刚达到浏览器定义的最小值，“真实”字体大小实际上更小。

↪示例

于 2012-06-14T20:02:16.227 回答
1

尝试将字体大小设置为特定数字而不是 %，例如 8pt 或 10px

于 2012-06-14T19:58:27.110 回答
1

我想知道是否是因为您在特定字体上使用的百分比较低。默认情况下，大多数浏览器显示相对于 16px 的字体。因此，当您定义 时#credit {font-size: 20%;}，您是在告诉浏览器，“我想要 16 像素的 20%，或者大约 3.2 像素的大小。” 这是一个可能的解决方案...

当我开始构建网站时，我总是首先在我的body标签上设置默认字体大小。我已经阅读了网络上的几个地方（包括 Chris Coyier 的流行 CSS-tricks 博客），如果你设置body {font-size: 62.5%;}，这实际上将有助于在不同的浏览器之间使字体大小相似。

如果您的目标是屏幕设备（似乎有些人已经建议），以像素为单位设置字体大小是可以的，尽管我开始成为ems的粉丝，因为它们看起来非常强大。 Ems是好的，因为它们总是相对于父级（在这个例子中，你的body文本）。如果您根据您的字体大小（即 62.5%（翻译 = ~16px））在emsbody中的其他页面元素上设置字体大小，那么您就是黄金。您为您的用户提供了最大的灵活性，并且您还支持 IE 浏览器在不降低字体质量的情况下放大和缩小...对于可能需要放大一点以阅读某些内容或缩小一点的用户总是有帮助的查看整个页面。

通过使用ems的这种方法并设置默认body字体大小，ems中的所有内容几乎都可以进行字面转换。因此，例如，如果您希望某些文本大小为 10px，只需将 font-size 设置为 1.0em。如果您想要 22px 的字体大小，请将您的字体大小设置为 2.2em...12px = 1.2em、72px = 7.2em 等。

简而言之，尝试设置您的body {font-size: 62.5%;}然后设置#credit {font-size: 0.8em;}. 这应该在 8px 的浏览器窗口之间为您提供类似的字体大小。如果您想要更小或更大的东西，请相应地调整。

更简单的答案是像其他人建议的那样只使用像素，但就像我说的那样，创建您的网站时要考虑到您的用户。:)

希望有帮助！

于 2012-06-14T20:20:17.747 回答