ビットマップ画像は優れていますが、モバイルアプリケーションの設計には課題があります。 画像を埋め込むと、アプリケーションのサイズが大きくなります。 そうでない場合、追加のHTTP要求を取得する必要があります。 画像はメモリを消費します。 さらに、ビットマップ画像はうまくスケーリングされません。 スケールアップすると、品質が低下します。 縮小すると、スペースが無駄になります。 一方、フォントは適切にスケーリングされ、各アイコン文字に追加のhttp要求を必要とせず、メモリ使用量を大幅に増加させることもありません。 アイコンフォントにはアルファベット文字の代わりにアイコンが含まれており、モバイルアプリケーションで画像の代わりに使用できます。
String.fromCharCode(0xe903)iOSとAndroidでの.ttfフォントの認識方法には概念的な違いがあります。 Androidでは、フォントはファイル名で認識されますが、iOSではフォント名で認識されます。 つまり、ファイル名とは異なるフォント名で作成されたフォントは、CSSルールの両方の名前で登録する必要があります。
.fa-brands {
font-family: "Font Awesome 5 Brands", "fa-brands-400";
}上記の例では、fa-brands-400.ttf（FontAwesomeサイトからダウンロードした）フォント名Font Awesome 5 Brandsがあります。 上記のCSSでは、フォントはiOS（フォント名でFont Awesome 5 Brands）とAndroid（ファイル名でfa-brands-400）の両方で認識されます。
| ファイル名 | フォント名 |
|---|---|
| fa-solid-900.ttf | Font Awesome 5 Free |
| fa-regular-400.ttf | Font Awesome 5 Free |
上記の例では、ファイル名は異なりますが、登録されているフォント名は同じです（MacのFont BookアプリケーションまたはWindowsのコントロールパネルのフォントセクションを使用して、実際のフォント名を確認してください）。 これはAndroidでは問題ありませんが、iOSでは2番目のフォントが使用できなくなります。 同様のケースを処理するには、font-weightなどの追加のCSSフォントプロパティを追加する必要があります。
/*
File name: fa-regular-400.ttf
Font name: Font Awesome 5 Free
*/
.far {
font-family: "Font Awesome 5 Free", "fa-regular-400";
font-weight: 400;
}
/*
File name: fa-solid-900.ttf
Font name: Font Awesome 5 Free
*/
.fas {
font-family: "Font Awesome 5 Free", "fa-solid-900";
font-weight: 900;
}以下の例は、CSSを介してfont-familyプロパティを設定する方法、およびXMLを介して必要なアイコンを定義する方法を示しています。
<!-- Using fa-regular-400.ttf -->
<Label text="" class="far"></Label>
<!-- Using fa-brands-400.ttf -->
<Label text="" class="fab"></Label>
<!-- Using fa-solid-900.ttf with FormattedString -->
<Label class="fas" textWrap="true">
<FormattedString>
<Span text="" fontAttributes="Bold"></Span>
</FormattedString>
</Label>
<!-- Using IcoMoon-Free.ttf -->
<Label text="" class="ico"/>.far {
font-family: "Font Awesome 5 Free", "fa-regular-400";
}
.fab {
font-family: "Font Awesome 5 Brands", "fa-brands-400";
}
.fas {
font-family: "Font Awesome 5 Free", "fa-solid-900";
}
.ico {
font-family: "IcoMoon-Free";
}NativeScript 6以降では、Image要素にアイコンフォントを使用できます。 そのためには、アイコンのフォントコードを設定するためにfont://プレフィックスが必要です。
<!--
In case, when the stretch property is set to aspectFit or aspectFill
the font-sizde will be disreagarderd and the image will take the vailable space
assigned through width/height or through its parent size
Setting the stretch property to none will allow using the font-size property
-->
<Image src="font://" stretch="none" class="fas"></Image>.far {
font-family: "Font Awesome 5 Free", "fa-regular-400";
}
.fab {
font-family: "Font Awesome 5 Brands", "fa-brands-400";
}
.fas {
font-family: "Font Awesome 5 Free", "fa-solid-900";
}
.ico {
font-family: "IcoMoon-Free";
}以下の例は、CSSを介してfont-familyプロパティを設定する方法、およびコードビハインドを介して必要なアイコンを定義する方法を示しています。
<ListView items="{{ glyphs }}">
<ListView.itemTemplate>
<StackLayout orientation="horizontal" horizontalAlignment="center">
<Label text="{{ icon }}" class="ico"/><!-- the icon (glyph) -->
<Label text="{{ code }}" /><!-- the icon code -->
</StackLayout>
</ListView.itemTemplate>
</ListView>const Observable = require("tns-core-modules/data/observable").Observable;
function pageLoaded(args) {
const page = args.object;
const viewModel = new Observable();
const glyphs = [];
for (let charCode = 0xe903; charCode <= 0xeaea; charCode++) {
const glyph = new Observable();
glyph.set("icon", String.fromCharCode(charCode));
glyph.set("code", charCode.toString(16));
glyphs.push(glyph);
}
viewModel.set("glyphs", glyphs);
page.bindingContext = viewModel;
}
exports.pageLoaded = pageLoaded;import { Observable, EventData } from "tns-core-modules/data/observable";
import { Page } from "tns-core-modules/ui/page";
export function pageLoaded(args: EventData) {
const page = <Page>args.object;
const viewModel = new Observable();
let glyphs = new Array<Observable>();
for (let charCode = 0xe903; charCode <= 0xeaea; charCode++) {
const glyph = new Observable();
glyph.set("icon", String.fromCharCode(charCode));
glyph.set("code", charCode.toString(16));
glyphs.push(glyph);
}
viewModel.set("glyphs", glyphs);
page.bindingContext = viewModel;
}/*
File name: IcoMoon-Free.ttf
Font name: IcoMoon-Free
*/
.ico {
font-family: 'IcoMoon-Free';
font-size: 48;
}
/* only for reference, is NOT working in this example (due to wrong glyph codes)
.fa {
font-family: "Font Awesome 5 Free", "fa-regular-400";
font-size: 48;
}
*/