HTMLページでアンチエイリアスフォント

StackOverflow https://stackoverflow.com/questions/661658

  •  20-08-2019
  •  | 
  •  

質問

ウェブページに鮮明でクリアな、大きいフォントを作成するための良い方法はありますか？私は、異なるフォントサイズや色で私のホームページ上のタグクラウドの効果を作成する必要があります。

私はそれがHTML / CSSでなく、安っぽい...それが少し見えるデフォルトとしてアンチエイリアシングをサポートしていない古いブラウザやOSの上に設定持っています。

私は美しく働いたが、私にいくつかの恐ろしい負荷の影響を与えた、 sIFR にしてプレイしました道があるかどうかが、私は今、思ったんだけどます：

A）私はアンチエイリアシングをサポートする（彼らは生のHTMLを取得）し、イメージタグを取得する「他者」で知っているブラウザ/ OSの組み合わせにより、ユーザーを分割するブラウザ/ OSの検出を行います。

B）はJavaScriptのいくつかの並べ替えは、アンチエイリアスを追加するには？

C）恒久的な解決策は、divの中のBG画像をロードし、HTMLテキストを非表示にします。 （私が知っている、私は、非インデックスについて、Googleのホラーストーリーを知っている...しかし、それは可能ですか？）

役に立ちましたか？

解決

a）はもちろん、ブラウザ検出を使用することができます。これを行う最も簡単な方法は、おそらく使用している jQueryののの<のhref = "http://docs.jquery.com /Utilities/jQuery.browser」のrel = "nofollowをnoreferrer">ブラウザの方法。 （jQueryのは、あなたが聞いていない場合はJS-多くの開発が容易になり、素晴らしいJavaScriptライブラリである）

どのブラウザ（またはOS）に応じて、あなたは、通常のテキストからフラッシュ液のようなものに、さまざまなソリューションをユーザに提示することができ、あなたが得る結果ます。

しかし、私はそれに対して助言します。物事は、古いものより新しいマシン上で良く見えます。それは私が古いブラウザではマイナーなグリッチに貴重な時間を費やして反対をお勧めする理由である、それは単なる方法です。 - 古いブラウザでない限り、ユーザーはもちろんのあなたの主な人口統計です。この場合は、どのようにあなたについては、それは完全にFlashでいますか？ 1は、常に動作するかどうかは使用権、2つのソリューションをコーディングしない？

B）あなたが実際にはJavaScriptを経由してアンチエイリアス処理されたテキストを作成することができます。私のプロジェクトを見ている Stimme Gottesする（「神の声」を死ぬ - ない宗教のために例えば）うるさいです。このプロジェクトでは、私はこのための優れた typeface.js に使用されます。

C）もしかしたら、CSSを使うのか？ 

h1.welcome {
    background: url('the-welcome-image.png') no-repeat;
    color: transparent;

}

他のヒント

1ハンクさんのコメント。あなたはこれを行うことによって獲得することは非常に少しを持っています。それはOSレベルでオフだ場合でも、デフォルトでアンチエイリアシングをオンにし、現代（ポストXP）のOS（IE7 +とSafariを含む）一部のデスクトップブラウザはとにかく、デフォルトでは、それをオンにする傾向があります。残りの上にAAを強制することで、あなたよ。

（+）少し知らず知らずのうちにAA

を持っていないIE6とXP + Firefoxユーザのための表示を改善

（ - ）皆のために遅いロードします（限られたモバイルデバイスの特にユーザー）

（ - ）敗北好ましいフォントサイズ

（ - ）不必要にそれはだから、意図的にアンチエイリアシングを無効にludditesを悩ます「すべてのぼやけ」（*）

（*：。これも特に古い、ファジーCRTモニターのため、意味を成さない限定された例がある）

それのルックスでは（本当の順で）最もよい方法があります：

1）の画像を使用。あなたはすべての手段によって、その後のサイトのSEOに依存している場合は、HTMLを追加し、CSS <のhref =「http://stopdesign.com/archive/2003/03/07/replace-text.html」のrel = "nofollowをを使用してそれを隠しますの

これらのいずれかの方法を使用してnoreferrer ">

2） typeface.js に - ほとんどの最新ブラウザで動作しますJS。いくつかのバグやグリッチを持っていますが、うまく動作します。あなたは、ユーザーにアンチエイリアシングを強制するつもりなら、これは動作します。控えめに使用してください。オペラとIE8の互換性に取り組ん著者けれども...

2） sIFRする - 動的にFlashムービーを使用してテキストの選択した領域を置き換え優れたスクリプト。ここでもいくつかのバグやグリッチが、あなたは素晴らしい見ているフォントで、単に興味があるなら、これは完璧です。これまで以上に小さくなるように、あなたのページの負荷が、しかし増やし、控えめに使用します。

私は瞬時にページがロードさを持って好きなように、JS重いソリューションに行かない傾向がありますが、あなたには、いくつかの格好良いフォントを持っている必要があれば、これらは最も優雅でシンプルな方法であるように見える。

同じ背景色でクラスまたは要素のためにそれを再定義し、背景色を強制。それは動作します。

span.your_class {
    writing-mode: tb-rl;
    filter: flipv fliph;
    background-color: #006cb8 !important;
}

FlashやSilverlightは、レンダリング、見栄えのフォントのためのあなたの最高の賭けている。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top