Lightbox Info Board : SQLの窓

埋め込みフォントのシンタックス


@font-face {
    src:url("location") | local("name");
    fontFamily: alias;
    [fontStyle: italic | oblique | normal;]
    [fontWeight: bold | heavy | normal;]
    [flashType: true | false;]
}

フォントの埋め込みについて

埋め込むフォントごとに、基本的な 4 書体である標準、ボールド、イタリック、およびボールドイタリック
を埋め込む必要があります。

書体ごとに独立した TTF ファイルを持たないフォントを埋め込む場合でも、
この書体の処理は必要になります。これは、標準書体以外の書体を使用する Flex コントロールが存在するからです。

たとえば、Button コントロールのラベルには、そのコントロールで使用するフォントのボールド書体が使用されます。
書体を 1 つだけ埋め込み、それを Button コントロールで使おうとしても、Button コントロールではボールド書体が
必要となるので、この埋め込んだ書体は適用されません。

ドキュメントにあったサンプルコードをもっと解りやすく改造したもの


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

<mx:Style>

	@font-face {
		src: local("HGP創英角ﾎﾟｯﾌﾟ体");
		fontFamily: HGP;
		fontWeight: normal;
		unicodeRange: U+3041-U+30F6,U+2460-U+2473;
	}
	@font-face {
		src: local("HGP創英角ﾎﾟｯﾌﾟ体");
		fontFamily: HGP;
		fontWeight: bold;
		unicodeRange: U+3041-U+30F6,U+2460-U+2473;
	}
	@font-face {
		src: local("HGP創英角ﾎﾟｯﾌﾟ体");
		fontFamily: HGP;
		fontStyle: italic;
		unicodeRange: U+3041-U+30F6,U+2460-U+2473;
	}

	global {
		font-family: HGP;
		fontSize: 11px;
	}

	.defClass {
		font-family: Dummy;
		fontSize: 11px;
	}

	TextArea {
		font-family: Dummy;
		fontSize: 16px;
		fontWeight: bold;
	}

</mx:Style>
<mx:Script>
	<![CDATA[
		import flash.events.Event;
		private function printMessage(event:Event):void  {
			message.text += event.target.label + " が押されました" + "\n"; 
		}
	]]>
</mx:Script>

<mx:Panel
	title="リファレンスガイドにあるボタンコントロールのサンプル"
	height="75%"
	width="75%"
	layout="horizontal"
	paddingTop="10"
	paddingBottom="10"
	paddingLeft="10"
	paddingRight="10"
>

	<mx:VBox>
		<mx:Label
			styleName="defClass"
			width="100%"
			color="blue"
			text="ラベルのテキスト"
		/>
		<mx:Label
			fontStyle="italic"
			width="100%"
			color="red"
			text="ラベルのテキスト"
		/>
		<mx:Label
			width="100%"
			color="black"
			text="ラベルのテキスト"
		/>

		<mx:Button
			label="①画像使用ボタンのラベル"
			id="iconButton"
			icon="@Embed('winofsql2.png')"
			labelPlacement="right"
			color="#993300"
			click="printMessage(event);"
		/>

		<mx:Button
			label="②ボタンのテキスト"
			color="#993300"
			toggle="true"
			selected="true"
			textAlign="left"
			fontSize="13"
			width="{iconButton.width}"
			click="printMessage(event);"
		/>
		<mx:Button
			fontStyle="italic"
			label="②ボタンのテキスト"
			color="#993300"
			toggle="true"
			selected="true"
			textAlign="left"
			fontSize="13"
			width="{iconButton.width}"
			click="printMessage(event);"
		/>
		<mx:Button
			styleName="defClass"
			fontStyle="italic"
			label="②ボタンのテキスト"
			color="#993300"
			toggle="true"
			selected="true"
			textAlign="left"
			fontSize="13"
			width="{iconButton.width}"
			click="printMessage(event);"
		/>

		<mx:Button
			styleName="myTextStyle"
			label="③プロパティなし(デフォルト)"
			click="printMessage(event);"
		/>
	</mx:VBox>

	<mx:TextArea
		id="message"
		text=""
		editable="false"
		height="100%"
		width="100%"
		color="#0000FF"
	/>

</mx:Panel>
</mx:Application>

書体について

4書体とドキュメントに書いてありますが、bold かつ italic は、ＭＳＰゴシックでも、
「そんなものは無い」とエラーになります。

また、ボタンは、italic を指定しても、外部フォントだと「②ボタンのテキスト」の比較でも解るように、
必ず bold が使われるようです(見た目が少し違うのは謎)。

ただ、デフォルトのフォントの場合はボタンでも italic になります
③プロパティなし(デフォルト)

デフォルトで bold が使われるのは、ボタン以外でも Panel のテキストがあります。

以上の理由により、bold の無いフリーのフォントでは、ボタンのテキストとして利用できません

セレクタ

global : すべて
.defClass : クラス =>styleName で指定
TextArea : コントロールの種類


global {
	font-family: HGP;
	fontSize: 11px;
}

.defClass {
	font-family: Dummy;
	fontSize: 11px;
}

TextArea {
	font-family: Dummy;
	fontSize: 16px;
	fontWeight: bold;
}

Unicode によるフォントの範囲指定

結局、ボタンは全て BOLD なので、ボタンのフォントを変更するには以下のように指定するのが簡単です。
但し、これはフォントを文字単位で指定するサンプルです。
( 漢字が必要な場合は、一文字でも範囲指定します。 )

※ フォントを全て読み込むと、ファイルが大きくなるので使用する文字だけを範囲指定します


<mx:Style>

	@font-face {
		src: local("HGP創英角ﾎﾟｯﾌﾟ体");
		fontFamily: HGP;
		fontWeight: bold;
		unicodeRange: U+3041-U+30F6,U+2460-U+2473;
	}

	global {
		font-family: HGP;
		fontSize: 11px;
	}


</mx:Style>

コードは、charmap.exe を使用してチェックします。

目的の漢字を選択するには、詳細表示をチェックして、「部首による入力」を選択し、
グループダイアログが表示されるので、部首を選択します。

簡単に絞るには、「読みにによる入力」で発音の最初を一文字だけ選びますが
候補が多い場合は、「部首による入力」ですぐ見つける事ができます

スタイルを外部ファイルにする


<mx:Style source="style.css"/>

何故か Shift_jis でないとビルドエラー


	@font-face {
		src: local("HGP創英角ﾎﾟｯﾌﾟ体");
		fontFamily: HGP;
		fontWeight: normal;
		unicodeRange: U+3041-U+30F6,U+2460-U+2473;
	}
	@font-face {
		src: local("HGP創英角ﾎﾟｯﾌﾟ体");
		fontFamily: HGP;
		fontWeight: bold;
		unicodeRange: U+3041-U+30F6,U+2460-U+2473;
	}
	@font-face {
		src: local("HGP創英角ﾎﾟｯﾌﾟ体");
		fontFamily: HGP;
		fontStyle: italic;
		unicodeRange: U+3041-U+30F6,U+2460-U+2473;
	}

	global {
		font-family: HGP;
		fontSize: 11px;
	}

	.defClass {
		font-family: Dummy;
		fontSize: 11px;
	}

	TextArea {
		font-family: Dummy;
		fontSize: 16px;
		fontWeight: bold;
	}

ActionScript 部分を外部ファイルにする


<mx:Script source="src.as"/>

当然 UTF-8N


import flash.events.Event;
private function printMessage(event:Event):void  {
	message.text += event.target.label + " が押されました" + "\n"; 
}