2

私は Web フォント、特に FontAwesome を使用しています。

<i class="fa fa-book" style="color:purple; font-size:100px; padding:10px 10px 10px 10px;"></i>

私は今、ブラウザのサイズが縮小されたときにこのフォントを自動的に縮小する方法を見つけようとしていますか? また、これを iPad やその他のモバイル デバイスで表示した場合も同様です。

よろしくお願いします。

アップデート

私は自分自身を明確にしていないと信じています。ブラウザーのサイズが変更されたとき、またはデバイスが変更されたとき、つまりデスクトップブラウザーではなく iPad が変更されたときに、Web フォントを拡大または縮小しようとしています。本質的に、フォントは反応して反応します。私はこれに非常に慣れていないので、何かを見落としているかもしれません。

4

1 に答える 1

2

ビューポート サイズに基づいてフォント サイズを変更する場合は、CSS メディア クエリ ブレークポイントを使用することをお勧めします。画面サイズまたは解像度と向きを組み合わせる方法にはほぼ無限の可能性がありますが、この記事では、モバイル、タブレット、およびデスクトップに最適化されたレイアウトを設計するときに役立つ一般的なブレークポイントを示します。

また、フォント サイズに関しては、ピクセルではなく em 単位を使用することを強くお勧めします。このようにして、たとえば<body>要素に基本フォント サイズを設定し、その値に相対的なページの残りのフォント サイズを設定できます。これは、ブラウザの大部分で 16px が事実上のフォント サイズであると仮定した場合です。

html {
    font-size: 100%;
}
body {
    font-size: 1em; /* 16px default */
    /* If you want the baseline grid to be 10px, use font-size: 62.5% instead */
}
h1 {
    font-size: 5em; /* 80px, because 16*5=80 */
}

たとえば、幅が 680px 未満のブレークポイントの場合:

/* Breakpoint for tablets */
@media only screen and (min-width: 0px) and (max-width: 679px) {
    body {
        font-size: .5em; /* Sets document font size to 8px */
    }
}

これにより、ページ全体のフォント サイズ (もちろん em 単位を使用) が 50% 縮小されます。

于 2013-11-05T16:17:30.520 に答える