13

私のサイトは IE や Opera と同じように表示されますが、Firefox では (CSS 経由で) Firefox のデフォルトの最小フォント サイズよりも小さいフォント サイズを取得できません。もちろん、[ツール] > [オプション] に移動してこの値を削除することもできますが、他のユーザーには要素の一部が移動されていることがわかります。

!important を使用してみましたが、機能しません。また、テキストを画像で置き換えることはできません。画像は動的フィールドです。

4

8 に答える 8

53

わかった。これを行う方法を説明しますが、最初にいくつかのことを知っておく必要があります。

1.これをするべきではありません。

最小フォント サイズ設定が存在するのには理由があり、非常に良い理由があります。簡単に言えば、ほとんどのフォントでは、12px 未満のものを読み取るのはすでに困難であり、デフォルトの最小値である 9px 未満であっても問題ありません。あなたのデザインが、非常に限られた状況¹ 以外でそのようなフォントサイズを必要とする場合、あなたのデザインはただ悪く、膨大な数のユーザーを除外しています.

2. 絶対にやるべきではありません。

Web は本質的に柔軟なメディアであり、優れたデザインではこれを考慮に入れる必要があります。固定フォント サイズが必要なデザインは印刷には適していますが、Web には適していません。この要件に対応できないデザイナーはメディアを理解していません。適切な PM は、実用性や使いやすさよりもデザイナーの悪い決定を優先すべきではありません。この決定に異議を唱えることができない場合は、はるかに大きく、より根本的な問題に対処する必要があります。

3. あなたは本当に、本当にこれをすべきではありません.

法域によっては、法的なグレー エリアをさまよっている可能性があります。小さなフォント サイズは読みにくく、ユーザーが情報を見落としやすくなります。これは、オプトアウト情報や免責事項など、手元にあるテキストが法的に重要な場合に特に厄介です。また、視覚障害を持つ人々に深刻な問題を引き起こすことで、サイトのアクセシビリティに関して薄氷の上を踏んでいます。

とにかくそれを行う方法

指定された最小サイズよりも小さいサイズで Firefox にフォントを表示させるのは非常に簡単です:プロパティを使用するfont-size-adjustだけです。

ここに科学のビットがあります

すべてのフォントにはアスペクト値と呼ばれるものがあります。これは、x-height (文字 x の高さ)² と設定した実際の font-size との比率です。たとえば Comic Sans では、これは非常に大きく (0.55)、Courier では短い文字 (a、c、e など) が長い文字 (b、d、h など) と比較してどのくらい大きいかがわかります。新しいそれはずっと小さいです (0.43)。

この変動性は、いくつかの問題を引き起こす可能性があります。たとえば、本文テキストに非常に派手なフォントを指定したとしますが、優れたデザイナーであるため、いくつかの代替フォントを提供します。これは素晴らしいことですが、これらのフォールバックの一部はアスペクト値が異なるため、指定したサイズでは文字が小さくなり、読みにくくなる場合があります。font-size-adjustフォールバックの x-height が超派手なフォントと同じであることを確認できます。

残念ながら、テキストを読みにくくするためにも使用できます。ボディ コピーが 12px の Segoe UI であるとします。

body {
    font-family: "Segoe UI";
    font-size: 12px;
}

Segoe UI のアスペクト値はほぼ正確に 0.5 であるため、それをfont-size-adjust値として指定しても、フォント サイズは変わりません。

body {
    font-family: "Segoe UI";
    font-size: 12px;
    font-size-adjust: 0.5; /* x-height = 12px × 0.5 = 6px */
}

小さいものに設定するとどうなりますか? ブラウザはフォント サイズを調整して x の高さがfont-size×に等しくなるようにしfont-size-adjustます。たとえば、次の例では、有効な font-size が 6px になります。

body {
    font-family: "Segoe UI";
    font-size: 12px;
    font-size-adjust: 0.25; /* x-height = 12px × 0.25 = 3px */
}

これが攻撃の基本です。font-size-adjust最小フォント サイズを上書きしても、Firefox は優先されることがわかりました。(言うまでもなくバグです。)

デモ

最小のフォントサイズを設定した Firefox でこれを試してください。これは 2 つのバグを悪用します: 前述のfont-size-adjust問題と、レンダリングされたフォント サイズをgetComputedStyle.

font-size-adjust正しい値を計算するには、使用しているフォントのアスペクト値を知る必要があります。これには、このアスペクト値のリストが役立つ場合があります。(または、システムにインストールされているフォントの推定エックスハイトを試してください。)

ちょっと待って！さらに悪いことがあります！

上記の手法は Firefox でのみ機能します。Safari、iOS Safari、Chrome など、Webkit の要素の最小フォント サイズをオーバーライドするのはさらに簡単です。非標準の-webkit-text-size-adjustプロパティを使用するだけです。

-webkit-text-size-adjust: none;

ちなみに、これは別のバグです。text-size-adjustテキストサイズがモバイルデバイスで自動的に膨張する範囲を制限することを目的とした非標準の提案です。デスクトップ UA で動作することを意図したものではなく、ましてや手動でのテキストのサイズ変更を妨げるものではありません。

最後の言葉：それは永遠に続くわけではありません

バグは最終的に修正されます。無責任なデザイナーや PM がどんなに望んでも、ブラウザーのデフォルトのフォント サイズを上書きできるようにすることは意図されていません。遅かれ早かれ、人々はこれらの特性が悪用されて Web を悪化させていることに気がつくでしょう。

そうは言っても、あなたがこれを余儀なくされているのであれば、最終的に関係者に決定を再考させる解決策を心から支持します.

¹ ヒント: テキストが、誰にでも読めるように意図された情報を伝える場合は、ブラウザーのアクセシビリティ設定をいじる必要はありません。正当なケースには、純粋に装飾的な効果 (複雑な ASCII アート、形状の詩) とドキュメントのプレビューが含まれます。

² より正確には、ベースラインから高さの中央値までの距離。これは、ほとんどのフォントの文字 x の高さです。

于 2012-09-27T22:56:07.907 に答える
2

You cannot do it. It's a setting that Firefox provides so that people like us cannot override it with some CSS settings.

于 2012-09-26T16:15:12.277 に答える
2

transform: scale(x)CSS3 の構文を使用して、テキストを最小サイズより効果的に縮小できますx < 1。これは、将来のブラウザーで動作することが保証されていますが (スケーリングのポイントであるため)、独自の課題/注意事項があります。

于 2013-02-11T20:22:30.970 に答える
1

誰かに役立つかもしれない場合に備えて、最初はHTMLであった小さなテキスト領域をSVGゾーンに置き換えることにしました。これらのゾーンをRaphaëlJSライブラリで次のようなコードで埋めます

logo_text = $j("#logo_text").val();
logo_text_preview_paper.clear();
logo_text_preview_paper.text(0, 4, logo_text).attr({"font-family": 'Helvetica', "font-size": 7, "text-anchor": 'start'});

HTMLキャンバスは、特定のブラウザーで利用できないため、またSVGがRetinaディスプレイではるかに優れたユーザーエクスペリエンスを提供するため、使用しませんでした。

それを行うのはやり過ぎに思えるかもしれませんが、FFの最小フォントサイズの問題に対するより簡単な解決策を見つけることができませんでした。

于 2012-09-26T08:29:47.260 に答える
0

場合によっては、<canvas> 要素と fillText() を使用できます。

于 2010-08-27T15:38:56.730 に答える
0

Web ページのデフォルトの CSS フォント サイズをパーセンテージに設定すると ... em のサイジングにより、クロス ブラウザーのスケーラビリティを提供できます ... フォント サイズを 62.5% に設定することは、フォントのベース hx サイズを 10px に再スケーリングするための基礎です。 .

body {

    font-size: 62.5%;

}

p  {

    font-size: 1em;
}

したがって、標準の段落テキストを 10px にしたい場合は、CSS で 1em と指定するだけで、10px としてレンダリングされます。これを本当に正しく行いたい場合は...表示を一貫させたいので、CSSのリセットも行う必要があることに注意してください...

エリック・マイヤーズ CSS リセット HTH

于 2011-12-29T08:38:58.550 に答える
-2

本文にフォント サイズ属性を設定する場合は、デフォルトのフォント サイズとして設定する必要があります。

body
{
    font-size: 12px;
}
于 2010-03-10T22:18:01.153 に答える