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 には最小フォント サイズが設定されていると思います。Chrome / Safariで実際に大きくなるかどうかfont-sizeなど、より高い値に調整してみてください. 0.4emそうでない場合は、ブラウザで定義された最小値に達しただけで、「実際の」フォント サイズは実際には小さくなっています。

↪例

于 2012-06-14T20:02:16.227 に答える
1

font-size を % ではなく特定の数値 (8pt や 10px など) に設定してみてください

于 2012-06-14T19:58:27.110 に答える
1

特定のフォントの使用率が低いためではないかと思います。デフォルトでは、ほとんどのブラウザーは 16px を基準としたフォントを表示します。つまり、 を定義したとき#credit {font-size: 20%;}、ブラウザに「16px の 20%、または約 3.2px のサイズが必要です」と伝えていたことになります。 これが可能な解決策です...

ウェブサイトを作成するときは、常に最初にbodyタグにデフォルトのフォント サイズを設定します。Web 上のいくつかの場所 (Chris Coyier の人気の CSS-tricks ブログを含む) を読んだことがありますが、 を設定body {font-size: 62.5%;}すると、さまざまなブラウザー間で同じようなサイズのフォントを作成するのに実際に役立ちます。

スクリーンデバイスをターゲットにしている場合は、フォントサイズをピクセル単位で設定しても問題ありませんが (いくつかはすでに提案されているようです)、 emsは非常に強力に見える ため、私はemsのファンになり始めています。emは常に親 (この例ではbodyテキスト) に対して相対的であるという意味で優れています。62.5% (翻訳 = ~16px) である font-size に基づいて、 emsの他のページ要素に font-sizes を設定すると、ゴールデンです。bodyユーザーに最大限の柔軟性を提供し、フォントを劣化させずにズームインおよびズームアウトできる IE ブラウザーもサポートしています...何かを読むために少しズームインしたり、ズームアウトしたりする必要があるユーザーにとって常に役立ちます。をクリックしてページ全体を表示します。

emsのこの方法を使用し、デフォルトのbodyフォント サイズを設定することにより、emsのすべてをほぼ文字どおりに変換できます。たとえば、テキストのサイズを 10px にしたい場合は、font-size を 1.0em に設定します。22px の font-size が必要な場合は、font-size を 2.2em...12px = 1.2em、72px = 7.2em などに設定します。

つまり、を設定してbody {font-size: 62.5%;}から を設定してみてください#credit {font-size: 0.8em;}。これにより、ブラウザ ウィンドウ間で 8 ピクセルの同様のフォント サイズが得られるはずです。小さいものや少し大きいものが必要な場合は、それに応じて調整してください。

さらに簡単な答えは、他の人が提案したようにピクセルを使用することですが、私が言ったように、ユーザーを念頭に置いてサイトを作成してください. :)

それが役立つことを願っています!

于 2012-06-14T20:20:17.747 に答える