Question

我的页面上有一些文字虽然很小但在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>

Answer 1

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

↪Example

Answer 2

尝试将font-size设置为特定数字而不是％，例如8pt或10px

Answer 3

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

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

设置字体大小（以像素为单位）是可以的，如果您的目标是屏幕设备（因为它似乎已经建议了），尽管我开始成为 ems 的粉丝相当强大。 Ems 在某种意义上是好的，因为它们总是相对于父级（在本例中，是您的body文本）。如果您根据body字体大小（即62.5％（翻译= ~16px））在 ems 中的其他页面元素上设置字体大小，那么您就是金色的。您为用户提供了最大的灵活性，并且您还支持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的浏览器窗口之间提供类似的字体大小。如果您想要更小或更大的东西，请相应调整。

更简单的答案就是像其他人建议的那样使用像素，但就像我说的那样，在设计时考虑到用户的想法。：）

希望有所帮助！

文字在Chrome中可读;在Firefox中微观

3 个答案: