web-dev-qa-db-ja.com

Appleヘッダーにテキストの画像を使用するのはなぜですか?

Appleは単純なテキスト見出しに画像を使用していることに気づきました。読みやすさを向上させるためだと思いますが、なぜ画像に乗らないのですか?

これをチェックしてください- http://www.Apple.com/why-mac/

見出し-「究極のアップグレードをしてください。Macへ。」画像です。

このヘッダーにテキストではなく画像を使用する正当な理由はありますか?

24
ideawebme

私の推測では、すべてのブラウザで一貫してテキストが表示されるようになっています。すべてのブラウザが font face をサポートしているわけではありません。したがって、エクスペリエンスはエクスペリエンスを完全に制御するための唯一の方法です。

そのページへの訪問者の多くは古いPCを持っている可能性があります。したがって、不適切なレンダリングによってページが破壊される危険を冒して、画像を表示します。サイトが「マックは美しく、うまく機能している」というメッセージを伝えるため。

15
Alvin

アクセシビリティを犠牲にして、視覚的な一貫性に重点を置いています。これはWebの動作方法ではありませんが、非常に成功したマーケティングキャンペーンを考えると、Appleがこのスタンスを取るのはそれほど驚くことではありません。

14
Matt

Appleのコーポレートフォントは無数です。 Myriadは、おそらくAppleの規模で誰かがWebサイトでサービスを提供するためのライセンスを取得するのに法外な費用がかかります。また、AppleはおそらくAdobeに支払いたくないでしょう。マーケティングWebサイトの設計上の決定をサポートするためだけに莫大なお金がかかります。

アクセシビリティに関しては;画像には、まったく同じテキストのalt属性があります。そのため、非画像ブラウザは通常どおりテキストをレンダリングするだけです。完全にアクセス可能です。

また、Appleは、フォントの読み込みが完了する前に、スタイルのないコンテンツのフラッシュを回避したいと考えています。また、小さな白黒の画像は、フォントのサイズよりもはるかに小さくなります。その特定の画像は8KBです。

8
Grant Hutchins

この決定には考慮すべきレガシーな理由があると思われますが、少なくともいくつかの妥当な説明が考えられます。

  1. 画像により、 trackingkerningligatures および contextual代替
    CSSは、カーニングやコンテキストの代替を作成者が制御することはなく、追跡の変更に対する非常に大まかなサポートを提供し、合字のグローバルな制御のみを提供します。
    それらが提供する唯一の実際のオプションは text-rendering: optimizeLegibility で、フォントで宣言されたカーニングペアを尊重し、すべての合字をオンにします(ただし、このオプションを使用しても、Firefoxのみが合字を使用しているようです)有効)。
    これにより、デザイナーにとってより多くのコントロールが可能になります。

  2. 画像に対する見出しのロックアップはAppleにとって重要です
    画像ベースの見出しの利点の1つは、テキストの折り返しの制御をブラウザーに譲る必要がないことです。 (何らかの理由で)ブラウザが実際の見出し書体を読み込めない場合、残念ながらAppleのスナップコピーが折り返されて、 orphans につながる可能性があります。あなたの例の見出しを想像してみてください:

    究極の
    アップグレード。に
    マック。

  3. これにより、AppleでCSSではまだ実現できない方法でテキストのスタイルを設定できます
    たとえば、ページ見出しの「Macが好きになる理由」テキストのグラデーションの塗りつぶしを見てください。今のところ、CSSで いくつかのトリッキー/ハッキーテクニック なしでそれを行う方法はありません。

  4. フォント(無数のプロ)は、Typekit(アドビのサービス)でホストすることを公的に許可されているだけです
    Appleは一般的に、そのアイデンティティの大部分を、特にホームページ上のテキストに関して、制御外のリモートサービスに依存させることに満足する可能性はほとんどありません。アドビ自身にアプローチして、使用するMyriad Proのさまざまなウェイトをすべてホストするライセンスを取得することは可能ですが、それでも上記の問題を解決することはできません。

興味深いことに、そのページのh3要素(メインの見出しの下にある各ブロックの見出し)もMyriad Proを使用していますが、CSSで宣言しています(@font-face宣言なし)。ユーザーがインストールしている場合はMyriad Proを使用します。それ以外の場合は、Lucida Grande(OS Xシステムフォント)、次にLucida Sans Unicode、Helvetica、Arial、そして最後にブラウザーのデフォルトのsans serif書体にフォールバックします。彼らはthatテキストは、必要に応じて他の書体で表示される余裕があることを明確に信じています。

7
Kit Grose

Webサイトの90%でテキストに画像を使用している場合、その理由は非常に基本的な技術上の理由です。フォントをWebブラウザで適切に表示するには、フォントをクライアントコンピュータに保存する必要があります。そうでない場合は、別の(デフォルト)フォントが使用されます(これはApple明らかに望ましくない)です。今、問題に対する2つの回避策があり、どちらもますます人気が高まっています。 、ただしほとんどのブラウザはこれらをサポートしていますが、すべてがサポートしているわけではないため、テキストの代わりに画像を使用するのが一般的です。次善策は次のとおりです。

  • https://typekit.com -Webサイトのフォントライブラリのフォントを使用できます。 (Adobe Creative Cloudサブスクライバーも無料で回避できます)。
  • フォントフェイス-CSSを使用して独自のフォントフェイスを埋め込むことができます(もちろん、そうするための法的権利がある限り)。フォントをフォントフェースに変換するのに適した場所は、次のとおりです。 http://www.fontsquirrel.com/fontface/generator/generator
1
Iddo

ここで素晴らしい議論。これまでの私の調査によると、ミリアドは当初、印刷メディア用に設計されました。したがって、Webの場合、レンダリングはそれほど鮮明ではありません。 Appleそれらの小さなタッチで知られているため、代替テキスト(アクセシビリティ)を含む画像を選択しました。

Appleが最も裕福な会社の1つであるので、Adobeからそれを購入することに関連する何か/価格が理由になるとは思わない。

しかし、次の質問は、「CSSスプライトがない理由」でした。結局、Apple Webページごとに複数の高解像度画像を使用することで知られているのに、なぜ不必要な追加のhttpリクエストを追加するのでしょうか?

答えは非常に単純です-Accessibility背景画像の代替テキストがないため。

詳細説明-CSSの背景画像は定義上は美的価値のみであり、ドキュメント自体の視覚的なコンテンツではありません。つまり、CSSの画像は視覚的な補足であり、ページコンテンツではないため、代替テキストは必要ありません。 「丸みを帯びた角」または「銀色のグラデーション」は、代替テキストとしてだれにも役立ちません。逆に、エンドユーザーを困らせます。

0
ideawebme