Preziと、日本語フォントの謎

今さらながら、Preziを使う機会があったので、軽く詰まったところをまとめておきます。

日本語を使う

Preziを使い始めて、一番最初に思ったこと…
「あれ？日本語入力できない」
日本語入力ができるようにするには、どうやら設定が必要なようです。

方法

• 左上のメニューっぽいアレから、「Colors&Fonts」をクリック

• 出てきたメニューから「日本語」を選択

これで、日本語入力が可能になります。

日本語フォントの謎

しかし、ここでまた問題が発生しました。
「日本語フォントがキモい」

なんでしょうか？このへんな感じは…

気になったので、ググってみると「中国語設定にするとうまく動くようになるよー」という意見が…
まさかと思い、「中文」にしてみると…見事に見栄え良くなりました。

ただ、あまりにも気持ち悪い解決策だったので、もう少し詳しく解決方法をねってみました。

方法

• 「Colors&Fonts」メニューの中の「Theme Wizard」ってのをクリック
• Theme Wizardが表示されるので、左下の「Manual」をクリックして、「Use the Prezi CSS Editor」ってリンクをクリック

• 以下のようなものが表示される

• 「@font-face...」と書かれたテキストボックスを次のように書き換える

@font-face
{
	src: url('VL-PGothic-Regular.swf');
	fontFamily: gothic;
}

background
{
	gradStart: #fff;
	gradEnd: #fff;
}

text
{
	padding: 1.2;
}

text.title
{
	fontFamily: gothic;
	color: #222;
}

text.subtitle
{
	fontFamily: gothic;
	color: #444;
}

text.body
{
	fontFamily: gothic;
	color: #111;
}

frame.circle
{
	thickness: 10;
	color: #444;
	alpha: 0.3;
}

frame.bracket
{
	thickness: 10;
	color: #444;
	alpha: 0.3;
}

frame.rectangle
{
	borderAlpha: 0.1;
	alpha: 0;
	borderThickness: 8;
	borderColor: #000;
	color: #fff;
	radius: 30;
}

arrow
{
	thickness: 8;
	borderAlpha: 0.6;
	borderThickness: 0;
	alpha: 1;
	borderColor: #fff;
	color: #288acc;
}

line
{
	alpha: 1;
	color: #999;
}

line-arrow.style1
{
	color: #666;
	alpha: 1;
	gradStartColor: #666;
	borderThickness: 0;
	gradEndColor: #666;
}

line-arrow.style2
{
	color: #5f56d7;
	alpha: 1;
	gradStartColor: #5f56d7;
	borderThickness: 0;
	gradEndColor: #5f56d7;
}

line-arrow.style3
{
	gradEndColor: #288acc;
	gradStartColor: #288acc;
	color: #288acc;
}

line-arrow.style4
{
	color: #ff0e00;
	alpha: 1;
	gradStartColor: #ff0e00;
	borderThickness: 0;
	gradEndColor: #ff0e00;
}

line-arrow.style5
{
	color: #20568e;
	alpha: 1;
	gradStartColor: #20568e;
	borderThickness: 0;
	gradEndColor: #20568e;
}

circle
{
	thickness: 100;
	borderThickness: 2;
	gradStartAlpha: 0.2;
	gradEndAlpha: 0.4;
	borderColor: #288acc;
	lockTintAlpha: 0.75;
	borderAlpha: 0.7;
	gradEndColor: #288acc;
	gradStartColor: #288acc;
	radius: 0;
}

shape
{
	thickness: 100;
	borderThickness: 2;
	gradStartAlpha: 0.2;
	gradEndAlpha: 0.4;
	borderColor: #288acc;
	lockTintAlpha: 0.75;
	borderAlpha: 0.7;
	gradEndColor: #288acc;
	gradStartColor: #288acc;
	radius: 0;
}

shape.style1
{
	thickness: 100;
	borderThickness: 2;
	gradStartAlpha: 0.2;
	gradEndAlpha: 0.4;
	borderColor: #666;
	borderAlpha: 0.7;
	gradEndColor: #666;
	gradStartColor: #666;
	radius: 0;
}

shape.style2
{
	thickness: 100;
	borderThickness: 2;
	gradStartAlpha: 0.2;
	gradEndAlpha: 0.4;
	borderColor: #5f56d7;
	borderAlpha: 0.7;
	gradEndColor: #5f56d7;
	gradStartColor: #5f56d7;
	radius: 0;
}

shape.style3
{
	borderColor: #288acc;
}

shape.style4
{
	thickness: 100;
	borderThickness: 2;
	gradStartAlpha: 0.2;
	gradEndAlpha: 0.4;
	borderColor: #ff0e00;
	borderAlpha: 0.7;
	gradEndColor: #ff0e00;
	gradStartColor: #ff0e00;
	radius: 0;
}

shape.style5
{
	thickness: 100;
	borderThickness: 2;
	gradStartAlpha: 0.2;
	gradEndAlpha: 0.4;
	borderColor: #20568e;
	borderAlpha: 0.7;
	gradEndColor: #20568e;
	gradStartColor: #20568e;
	radius: 0;
}

free-line
{
	thickness: 0;
	alpha: 0.5;
	color: #33c;
}

free-marker
{
	thickness: 20;
	alpha: 0.3;
	color: #ff0;
}

grid
{
	color: #def;
}

• 「Apply」をクリックしたらおしまい

説明

デザイン設定をCSSを用いて行なっています。
単に日本語用設定のテンプレートから、フォントの定義部を、中文で利用されている設定に変更しただけです。

注目すべき点は、日本語テンプレートに利用されているフォント用swfファイルが「kochi-gothic-subst.swf」で、中文テンプレートに利用されているフォント用swfファイルが「VL-PGothic-Regular.swf」であるということ。
「kochi-gothic-subst.swf」って東風フォントの事だよね？「VL-PGothic-Regular.swf」はVLゴシックだよね？
なぜ両方日本語フォントなのでしょうか？
そして、なぜ日本語フォントに東風フォントを使ったのでしょう？
不思議ですね。