読者です 読者をやめる 読者になる 読者になる

さわっても熱くない花火

ちょっとした驚きを食べながら生きています

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

Webサービス

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


日本語を使う

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

方法

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

f:id:yanoshi:20120227011942p:plain

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

f:id:yanoshi:20120227012015p:plain

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



日本語フォントの謎

しかし、ここでまた問題が発生しました。
「日本語フォントがキモい」
f:id:yanoshi:20120227012200p:plain
なんでしょうか?このへんな感じは…

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

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

方法

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

f:id:yanoshi:20120227012744p:plain

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

f:id:yanoshi:20120227012905p:plain

  • 「@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ゴシックだよね?
なぜ両方日本語フォントなのでしょうか?
そして、なぜ日本語フォントに東風フォントを使ったのでしょう?
不思議ですね。