Sencha

トレーニングでのTips: Sencha Architect でカスタムフォントを使う

こんにちは、ゼノフィnakamuraです。

この記事は、US Sencha社ブログ Training Tip: Using Custom Fonts with Sencha Architect を翻訳したものです。

かつてウェブサイトは Arial, Gerogia, Times などの普通のフォントに制限されていました。その頃フォントはユーザーのパソコンから提供されていました。ありがたいことに現在は HTML5 と CSS3 のお陰で、ブラウザにはウェブフォント対応が組み込まれています。

今月の Training Tips では、Sencha Architect でカスタムフォントの利用方法について説明します。このチュートリアルでは、Sencha Touch のスターターアプリケーションの一つをデフォルトテーマとともに利用します。しかし、このコツは他の Sencha Touch や Ext JS アプリケーションでも使えます。

フォントサービスからカスタムフォントを取り込む

Default テーマをプロジェクトにドラッグしていない場合は、ドラッグします (Sencha Touchのスターターアプリの一つを使っています) 。 カスタムテーマを拡張するために、Default テーマをApply (摘要) します。

  1. MyDefaultTheme を選択し、scss のところにある + ボタンをクリックし、新しいSassスニペットを追加します。
  2. Scss Resourceの右矢印のボタンをクリックして、Sass コードスニペットプロパティに入ります。
  3. compile orderbeforeVariables にセットします。
  4. 注:カスタムフォントの作業に関して、注意するべきなことは、フォントは常にスタイルシートの先頭にある必要があります。Scss Resource の Compile order を変更しないと、このスニペットは Sencha テーマのスタイルが全て挿入された後に挿入されます。そうなると、カスタムフォントは表示されません。

  5. フォントサービス (またはオンラインのフォントプロバイダ) は無料でホスティングされているウェブフォントのディレクトリです。 フォントサービスがあるおかげで、ローカルでフォントをホストする必要がありませんし、そのため、フォントの所有権はを処理する必要もありません。 Google Web Font や Typekit のような、いくつか人気のフォントサービスがあります。
  6. それでは、Google Web Font を使いましょう。好きなフォントが利用できます。

    使いたいフォントが見つかったら、Add to Collection ボタンをクリックします。

    次に “Use” タブをクリックします。手順の 3 番目のところまでスクロールして、@import タブをクリックします。表示されるコードをコピーします。

  7. Architectを開いて。Code エディタにフォントのコードをペーストします。例えば。
  8. 1
    
    @import url(http://fonts.googleapis.com/css?family=Exo&subset=latin,latin-ext);
  9. MyDefaultTheme を選択して、config インスペクターでThemeタブをクリックします。
  10. ここで “font” でフィルターをかけて下さい。Ext.Class の中の font family を設定できます。次の値に設定します (選択したフォントを指定します) 。
  11. 1
    
    'Exo', sans-serif;

ここで Design ビューに戻って、新しいフォントをプレビューして下さい (何も見えない場合は、Refresh ボタンを押して下さい) 。

カスタム @font-face(local)フォントの取り込み

しかし、自分のフォントを利用したい場合にはどうしましょうか? また、あなたの会社が利用したい独自のフォントがある場合にはどうしましょうか? その課題を検討する前に、ローカルフォントについて、もう少し説明します。

@font-face は、カスタムウェブフォントを統合するために利用される CSS 技術です。システムフォントに対して、OS で使用可能であればフォントを選択し、@font-face がインターネットからフォントをダウンロードします。 残念ですが、現在のメジャーブラウザは一つのウェブフォントソリューションに統一されていません。そのため、スタイルシートに複数のウェブフォントのエクステンションを埋め込む必要があります。

これらのフォント パッケージはオンラインで取得することができます。例えば http://www.fontsquirrel.com は、商用利用が100%無料のフォントをダウンロードできるウェブサイトです。

  1. 新しいSassスニペットを追加するには、 MyDefaultTheme を選択して、scss の + のボタンをクリックします。
  2. Scss Resource の右矢印ボタンをクリックして、 Sassコードスニペットのプロパティを入力します。
  3. compile orderbeforeVariables に設定します。
  4. 次に、お好みの font-face を font-squirrel.com からハードディスクにダウンロードします。 例えば http://www.fontsquirrel.com/fonts/exo-2
  5. Webfont kit タブをクリックして、 拡張子 ttf, eot, woff, svg, がパッケージに含まれていることを確認します。 青い Download @Font-face Kit ボタンを押します。

  6. zip ファイルを解凍し、フォントフォルダの一つを開きます。その中にある .css スタイルシートを確認して、インポートするコードをコピーします。
  7. Sencha Architectに戻り、MyDefaultTheme を Code editor で開き、コピーしたコードをペーストします。次の様な感じです。
  8. 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    
    @font-face {
        font-family: 'exo_2.0regular';
        src: url('Exo2.0-Regular-webfont.eot');
        src: url('Exo2.0-Regular-webfont.eot?#iefix') format('embedded-opentype'),
             url('Exo2.0-Regular-webfont.woff') format('woff'),
             url('Exo2.0-Regular-webfont.ttf') format('truetype'),
             url('Exo2.0-Regular-webfont.svg#exo_2.0regular') format('svg');
        font-weight: normal;
        font-style: normal;
    }
  9. Architect のプロジェクトを保存して、ファイルシステムのプロジェクト resources フォルダに4つの拡張子のフォントファイルをコピーします。ここで fonts サブフォルダを作ってもいいですね。
  10. フォントは resources/fonts/ に配置されているため、 Architect のスニペットでパスを固定する必要があります。 Sencha Architect は、フォントが /theme/ フォルダに配置されていることを予測しています。 また font-family 名も変更しました:
  11. 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    
    @import url(http://fonts.googleapis.com/css?family=Exo&subset=latin,latin-ext);
     
    @font-face {
        font-family: 'Exo2';
        src: url('../../resources/fonts/Exo2.0-Regular-webfont.eot');
        src: url('../../resources/fonts/Exo2.0-Regular-webfont.eot?#iefix') format('embedded-opentype'),
             url('../../resources/fonts/Exo2.0-Regular-webfont.woff') format('woff'),
             url('../../resources/fonts/Exo2.0-Regular-webfont.ttf') format('truetype'),
             url('../../resources/fonts/Exo2.0-Regular-webfont.svg#exo_2.0regular') format('svg');
        font-weight: normal;
        font-style: normal;
    }
  12. MyDefaultTheme を選択して、Theme タブをクリックして下さい。
  13. ここでフィルターに font と入力します。Ext.Class では、font family も設定できます。次の値 (あるいは選択したフォント) を設定して下さい:
  14. 1
    
    'Exo2';
  15. プロジェクトをコンパイルして、ブラウザでその結果をテストして下さい。新しいフォントが表示されます。

Sencha Touch のテーマについて、詳しく学びたい方は是非トレーニングに申し込んで下さい。7月にテーマに関する上級 Sencha Touch オンラインコース を開催します。

PAGE TOP

Copyright © 2006-2014 Xenophy.CO.,LTD All rights Reserved.