最初のバージョンは、モバイルデバイスの近代的な市場をゆっくりと、しかし確実に去りつつも、まだ完全に忘れられていない単純な電話に焦点を当てています。 このカテゴリには、本格的なオペレーティングシステムを搭載していない携帯電話が含まれます。古いブラウザは、本格的なJavaScriptコードを理解せず、その制限により、急速に発展するインターネットテクノロジーをサポートできません。 このグループでは、実績のある古い方法-.png-および.gif-graphicsを使用する必要がありました。
サポートおよび開発する2番目のバージョンは、スマートフォン用に設計されています。 今日の彼女について、そして議論されます。
パート1：アイコンフォントの接続
最新のスマートフォンには、忘れてはならない、適応しなければならない多くの機能があります。 それらの1つは、ピクセル密度が増加した画面（特にRetina画面）の外観、ページを拡大する可能性、およびその結果、通常の画像がぼやけることです。 このため、スケーラブルなグラフィックスを使用する必要性が生じました。スケーラブルなグラフィックスは、1：1スケールと複数の増加後の両方ではっきりと見えるでしょう。 この状況から抜け出す方法は、アイコンフォントの使用でした。 次の図は、2つのオプションを示しています。上部には、2倍に拡大された.png画像と、同じ倍率のアイコンでフォントを使用した結果が表示されます。
このプロセスの本質は、フォントファイル内で文字がグラフィックアイコンに置き換えられることです。実際、一意のフォントが作成されます。 この例では、たとえば、「@」アイコンは虫眼鏡、英字「I」（インターネットから）-地球アイコンへ、文字「P」（写真から）-画像アイコンなどに置き換えられます。 置き換えるときは、グラフィックと文字の相対的な類似性を守ることをお勧めします。これにより、何らかの理由でフォントがロードされない場合でも、ユーザーはサイトをナビゲートできます。
カスタムフォントの読み込みは、CSS @ font-faceコンストラクトを使用するPCと同じです。 唯一の違いと大きなプラスは、スマートフォンで作業する場合、さまざまなブラウザのためにPCに必要なため、さまざまなフォント形式（.eot、.woff、.ttf、.svg）のサポートを心配する必要がないことです。
iOS、Android、bada、およびBlackBerryのオペレーティングシステムに基づいた電話の場合、1つの形式の.ttfをロードするだけで十分です。 組み込みのブラウザだけでなく、モバイルFirefox、Chrome、Opera Mobileでもよく理解されています。
スタイルシートでは、ロードは次のようになります。
@font-face { font-family: 'goMailIco'; src: url("/font/goMailIco.ttf"); font-weight: normal; font-style: normal; }
それにもかかわらず、現代のスマートフォンには時々パーソナルコンピューターに匹敵する特徴があるにもかかわらず、特別なアプローチを必要とするものがあります。 ウェブサイトの表示の品質を改善するための努力の中で、写真を与えられたスマートフォンのグループを選択する必要がありました。 このグループには、Windows Phone 7やAndroid 2.2より前のバージョンなどのオペレーティングシステム上のデバイス、およびOpera Miniブラウザーが含まれます。これは、任意のOSを搭載した携帯電話で開きます。 この分離は、テストデバイスでの実験後に行いました。
サーバー側では、go.mail.ruにアクセスする各デバイスは、ユーザーエージェントとその他のパラメーターによって決定されます。 さらに、このデータはテンプレートエンジンに転送されます-JinjaはMail.Ru Searchプロジェクトで使用されます。 ユーザーにフォントまたは画像を提供するかどうかを決定するレコードは次のようになります。
{% set switchFont = (detector.os in ('iphone os', 'blackberry', 'bada') or detector.os == 'android' and detector.osver >= 2.2) and (not detector.is_opera_mini) %}
デバイスが2.2以降のバージョンのiOS、BlackBerry、badaまたはAndroidオペレーティングシステムを実行し、is_opera_mini変数がfalseの場合、switchFont変数はtrueです。 次に、switchFontの値に応じて、2つのうちの1つがテンプレートに表示されます。
以下は、ロゴの例を使用したテンプレートのコードです。
{% if switchFont %} <div class="logo__ttf"> <a href="#"> <span class="logo__ttf_color">@</span>mail<span class="logo__ttf_color">.ru</span> </a> </div> {% else %} <a href="#"> <div class="logo__img"></div> </a> {% endif %}
彼のスタイルは次のようになります。
.logo__img { background: url(data:image/png) 0 0 no-repeat; background-size: 100% auto; width: 165px; height: 25px; } .logo__ttf { font-family: 'goMailIco'; color: #fff; font-size: 24px; } .logo__ttf_color { color: #ffb81d; }
テンプレートエンジンが.logo__ttfクラスを持つ各文字に対してフォントオプションを使用することを決定した場合、非標準フォント「goMailIco」が適用され、標準文字mは企業mail.ruフォントからの文字に置き換えられます。 font-sizeを使用して正しいサイズを選択し、色、影を設定し、必要に応じてCSS3のすべての機能を使用するだけです。
写真を撮る場合、状況はほぼ標準です。ただし、必要な2倍の画像をアップロードします。 たとえば、ピクセル密度を高めた画面に200x300ピクセルの画像を表示するには、400x600ピクセルの画像を読み込んでから、CSS属性、htmlパラメーター、または、この場合のように、必要なコンテナの大きさ、背景を持つ画像を使用して縮小する必要があります「background-size：100％auto;」スタイルを使用するとサイズが2倍になります。
このオプションを使用すると、標準の画面解像度（device-pixel-ratio：1）を備えたスマートフォン用の非常に大きな画像をダウンロードできますが、これは拡大には適していません。 これは、背景画像をbase-64形式でエンコードすることで補正されます。これにより、ファイルサイズの違いに勝ち、2つの形式（1対1および2対1）で画像を保存および維持する必要がなくなります。 -サーバーへのクエリ。これにより、全体的なダウンロード速度が向上します。
パート2：フォントデザイン
フォントをアイコンに接続する技術的な詳細について説明したので、そのようなフォントの開発方法について説明します。 ベクター形式のアイコンまたはその他のグラフィックが既にある場合は、作業の半分が完了しています。 そうしないと、既存のラスターアイコンをベクターエディターで再描画する必要があります。 グラフィックスのセット全体を1つのドキュメントのレイヤーに配置できますが、フォントのアセンブリの場合は、各文字を個別のファイルにエクスポートすることをお勧めします。ファイルの形式は、既存のフォントエディターでインポートできます。
500〜1000ピクセルの大きなサイズのオブジェクトを使用することをお勧めします。 この場合、アイコンは16〜32ピクセルのサイズの画面でラスタライズできるため、過度の詳細化は避けてください。 単色のフォームを使用します。ストロークや効果はありません。 色やその他の効果、たとえば影は、ページレイアウトで既にアイコンに適用できます。 アイコンで複数の色を使用する必要がある場合は、要素に要素を分割する必要があります。各要素は個別のフォントシンボルになり、互いに重なり合い、それに応じて色付けされます。
Font Creator （Windowsの場合）、 Glyphs （Macの場合）、 Inkscape （Windows、Mac、Linuxの場合）など、いくつかのエディタープログラムがあります。ベクターグラフィックスをすぐに編集して、svg形式のフォントを作成できます。
最終結果については、新しいフォントを作成するか、完成したフォントの文字を置き換えるかはそれほど重要ではありません。 ただし、空のフォントに文字を追加するには、異なるオペレーティングシステムの文字に対応するインデックスを手動で検索して割り当てる必要があります。その後、さまざまなメトリックを構成します。 font.ccからのように、変更を許可するライセンスを備えた既製のフォントを基本とする方が簡単です。 準備したベクターグラフィックスをインポートして、選択した文字を置き換え、サイズ、インデントの対応を監視し、ベースラインに合わせます。
アイコンを複数の色の要素に分割した場合は、オーバーレイを追加して、互いの位置とサイズを維持することをお勧めします。 この段階では、おそらくアイコンの位置とサイズをテストし、場合によっては明確にする必要があります。
エディターが.ttf以外の形式でのみフォントを保存する場合、 Fontsquirrelなどの変換にオンラインサービスを使用できます。 このようなサービスでは、未使用の文字を削除することでファイルサイズを小さくすることもできますが、エディターの開発段階で行うことをお勧めします。
以上です。 超高解像度画面の代替ソリューションを見つけた場合は、共有してください。
検索プロジェクトのモバイルバージョンを表示するには、モバイルデバイスからgo.mail.ruにアクセスします。
プロジェクト検索のモバイル版の開発者、Daria Skakun
Alexey Likhodzievsky、モバイルプロジェクトエリア長