ここでは、GeneXus で Google フォントと Web フォントを使用する方法について説明します。
この機能の主要な目的は、クライアントマシン (ブラウザーを実行しているマシン) にインストールされていないフォントを含め、あらゆるフォントを利用可能にすることです。
リモートフォントの使用は、CSS3 仕様の @font-face ルールを使用して指定します。
それでは GeneXus での使用方法について見ていきましょう。
1. フォントの参照元となる Theme オブジェクトを編集します。
[ フォント ] ノードに移動し、 [ フォントを追加 ] を選択します。次のオプションを示すダイアログが表示されます:
- フォントファイルが参照されるナレッジベース内のファイルオブジェクトを選択、または
- [ ファイルからインポート ] をクリックして、PC 内のフォントファイルを検索。この場合、そのフォントファイルの名前でファイルオブジェクトが自動的に作成されます。図 1 を参照してください。
図 1.
前述の手順の結果、 [ フォント ] ノードの下にノードが作成され、ここから [ ファイル ] プロパティ内のフォントが参照されます。GeneXus で使用するため、フォントはファイル名で特定されます。これは必要に応じて変更できます。図 2 を参照してください。
図 2.
生成された Theme の CSS には、次の例に示すような @font-face ルールが含まれています:
@font-face{
font-family:'OpenSans-Regular';
src:url(OpenSans-Regular.ttf)
}
この例では、CSS が配置されているのと同じフォルダに OpenSans-Regular.ttf ファイルをコピーする必要があることに注意してください。
2. 次に、このフォントクラスをコントロール内で参照する必要があります。推奨される方法は、このフォントを使用する項目属性またはテキストブロックに関連付けられる Theme のクラス内で、フォントを参照することです。
そのため、フォントを使用する Theme のクラスを編集し、 [ Font Family ] プロパティを選択して、最初の手順で作成したカスタムクラス (Custom Theme Fonts) を入力します。
図 3.
このクラスで、代替フォントの順序を選択することができます。
前述の手順を最後まで実行すると、"textblock1" クラスのフォント ファミリ グループ内に "OpenSans-Regular" フォントが設定されます。そのため、このクラスと関連付けられたすべてのテキストブロックは、このフォントを最初の代替フォントとして使用することになります。
.TextBlock1 {
font-family: OpenSans-Regular,"Trebuchet MS",Arial,Helvetica,sans-serif;
}
注: 既定では、すべてのフォントタイプが IIS でサポートされているわけではありません。フォントファイルの取得を試みているときに 404 エラーを受け取った場合、次のコマンドを実行します:
C:\Windows\System32\inetsrv\appcmd set config /section:staticContent /+ [ fileExtension='.woff',mimeType='text/css' ]
(「.woff」を追加対象の拡張子に置換します) 次に、IIS を再起動します。
"Joti One" などの Google フォントを使用する必要がある場合、前述の例と同様に、このフォントを Theme クラスの [ Font Family ] プロパティで参照する必要があります。
たとえば、"textblock1" クラスの場合、 [ Font Family ] ダイアログを開き、図 4 に示すように、フォントへの参照を含めます:
図 4.
この場合、ここで参照される Custom Theme Font が Google フォントの名前です。前述の例のように、Font タグを追加する必要はありません。これは、この場合、フォントが Google CSS に含められているためです。
この CSS を参照するため、[ HeaderRawHTML ] プロパティを次の例のように使用できます:
Event Start
form.HeaderRawHTML = "<link href='http://fonts.googleapis.com/css?family=Joti+One' rel='stylesheet' type='text/css'>"
Endevent
たとえば、こちらを参照してください。
この参照は、ページのヘッダーに含められます。
"textblock1" クラスの [ Font Family ] プロパティのフォントグループ内に "Joti One" フォントが含められます:
.TextBlock1 {
font-family: "Joti One",OpenSans-Regular,"Trebuchet MS",Arial,Helvetica,sans-serif;
}
直接コントロールのプロパティで Web フォントを割り当てないようにしてください。CSS クラスでのみ割り当ててください。
使用するフォントをブラウザーがサポートしているかどうかを考慮してください (詳細はこちら)。
スマート デバイス アプリケーションのカスタムフォント
|