fontの最近のブログ記事

iPhoneでおマヌケ書体。

| トラックバック(0)

お暇な方、本エントリーをiPhoneで(※)閲覧してみてください。

たぶんアジアのひとがつくった、おマヌケなにほんごFONTがとうさいされている。Unicodeはたいへんだなぁ。

iPhone上では↑の文、あまり見かけない、へたくそな日本語フォントで表示されているはずです。こちらのフォントは、「黒体-日本語 ミディアム 」。一応、ひらがな/カタカナ全キャラクター揃っています(もちろん漢字も)。「黒体-韓国語 ミディアム 」「黒体-簡 ミディアム 」「黒体-繁 ミディアム 」とシリーズで用意されているので、韓国語や中国語と日本語を混在させたい場合に使うのでしょう、か……。何の目的で制作/搭載されているかは不明です。

多言語フォントのデザインは隙だらけですね(ねらっていたらすごいですけど)。

iPhone用のフォントビューア、Cédilleで見つけました。

※OSXやWindowsXPで閲覧する人のために、「Arial Unicode MS」もかませています。こちらも多言語表示のために目一杯キャラクターを積んだへぼいフォントです。残念ながらMicrosoftは開発を断念したようなので、Vista/7には搭載されていません。

補足:漢字完成度通常品質也。

うわぁ……。困ったなぁ……。


全てのOSXに搭載のヒラギノはこちら。


最近のOSXに(追加で)搭載のヒラギノはこちら。iPhoneに搭載はこちらだけ。

ヒラギノ角ゴシック、バージョン違いでフォントネームが異なります。cssのfont-family指定に影響ありありです。ちなみにiPhone(≒iPad)に搭載はProNだけ。

現時点では、iPhone搭載の日本語フォントは唯一ヒラギノ角ゴシックProNだけですから、どんな(日本語)フォントを指定しても全部ProNで表示します。ですが、(もし)iPadあたりに新しい日本語フォントが搭載されちゃうと多分もうアウトです。

(後でまとめ直します)

AquaKanaを普通に使う。

| トラックバック(0)

AquaKanaはなぜか「不可視フォント」のため、フォントメニューには表示されません。
ですが、font-familyの指定を使い、htmlで表示させる事ができます。
htmlで表示可能なフォントは、テキストエディットやMailなどのアプリケーションで普通に使うことができます。

利用方法を簡単にまとめました(基本、Snow LeopardのSafari、Chrome限定です)。


////////////////////////////

①まず、この文字列をコピーし、「テキストエディット」や「Mail」などのリッチテキストフォーマットを扱えるエディタにペーストします。

①まず、この文字列をコピーし、「テキストエディット」や「Mail」などのリッチテキストフォーマットを扱えるエディタにペーストします。

②次に、フォントパネルから[よく使う項目]に登録します。

③以後、いつでも使えるようになります。


////////////////////////////

一度お試しあれ。

「アクアかな」が変わった。

(↑ Snow LeopardのSafariやChromeなどでご覧下さい)

2003年頃から、OSXのシステムフォント「AquaKana」について調べた事をAquaKana FAQというページにまとめています。

しばらく放置してありましたが、Snow Leopardになってからシステムフォント周りに大幅な変更があったようです(※1)。AquaKanaにもそれなりに変更が発生しています。(FAQページの改訂前に)取り急ぎ、現時点でのもろもろを備忘録としてまとめます。


////////////////////////////
otfからttcに、1ファイルに。

ファイル形式が変わっています。.otf(OpenType font)形式から、.ttc(Windows TrueType font collection)形式に変わっていました。

また、従来は「AquaKanaRegular.otf」と「AquaKanaBold.otf」の2ファイルだったのですが、「AquaKana.ttc」として1ファイル(font collection)にまとまりました(※2)。


////////////////////////////
(一応)全文字揃った。

従来、ひらがな・カタカナだけのみの限定的なフォントだったものが、いつの間にか全キャラクター揃っていました。ファイルサイズも巨大化し、68KBから36MBに。

ですが、単にキャラクターが埋まっただけで、漢字や欧文のデザインは全く異なります。ヒラギノ角ゴシックをそのまま流用しているようです。

アクアかな|漢字とAlphabet。

ヒラギノ角|漢字とAlphabet。

(↑Snow LeopardのSafariやChromeなどでご覧下さい|カーソル入ります)


////////////////////////////
結論。見栄えや挙動は変わらず。従来通り。

外観上の変化は全くありません。また、(もし、物好きの方が)htmlで使った場合も挙動に特に変化はなく、従来と同じ表示をします。興味のない方(/ある方にも)には全く影響はないようです。

ちょっとがっかりです。


////////////////////////////

※1 こちらのblog記事によると、システムフォントがことごとく.ttc形式に改められ、統一されているようです。特に、.dfont(Datafork TrueType font)がかなり減っています。

※2 とはいうものの、フォント「ファミリー」になったわけではありません。相変わらず「ファミリーネーム」はRegularとBoldで異なりますので、strongタグで太字になったりはしません。


TTEditによる、TrueType(Snow Leopard)のAquaKana(Bold)の書体名詳細情報


OTEditによる、OpenType(旧来)のAquaKanaの書体名詳細情報

あんま変わってなくてがっかり。

Point vs Pixel

| トラックバック(0)

(補)書いた後で読み返してみましたが、我ながらたいへんわかりづらい内容ですね。
一言でいえば、
「MS Pゴシックアンチエイリアスなしのユーザーを対象にデザインするのはしんどいな〜」
という事です。

////////////////////////////

気付いてしまったのでエントリー。

OSXは、画面解像度が72ppi(※1)であることを前提に設計されています(※2)。
 →したがってpixel=pointとなります(※3)。10ptの文字は、10pxの文字として表示されます。

Adobeのソフトウェアもそうです(※4)。画面解像度が72ppiであることを前提に設計されています。

Windowsは、画面解像度が96ppiであることを前提に設計されています(※5)。
 →OSXやAdobeのソフトに比べ「モニタのキメが細かいことを前提にしている」ともいえます。
  10ptの文字は、110*96/72=10*4/3≒10*1.333... 約13.3pixelを使って表示されます。

現在のほぼすべてのWebブラウザは(※6)、画面解像度が96ppiであることを前提にhtmlを解釈します。
 →「10px」、とピクセルで指定されたら10px相当の文字サイズで描画しますが、「10pt」とポイントで指定されたら96/72*10=13.333pxのサイズの文字を描画します。

ここまでよろしいでしょうか。
上記の前提から、

Adobeのソフトウェア、PhotoshopやFireworksなどのグラフィックソフトでは、ptによるhtmlの文字組みのデザインシミュレーションはできません。かなりアバウトな近似値となります。

「いいじゃん、べつにできなくたって。pxの絶対指定(※7)で組めば、そのシミュレーションはできるんでしょ」
いやいや、整数値のpxで絶対指定する限り、ブラウザの文字サイズは、整数値のptとむりやり解釈され(小数点以下は四捨五入)、意図しないサイズでの指定となってしまいます(※8)。それを実装後に微調整するのは馬鹿らしいと思いませんか。

「もう全部相対指定でいいじゃん。具体的な文字サイズはユーザーが最終決定すればいいじゃん」
いやいや、MS Pゴシックなど、ビットマップを持ったフォントは文字サイズによってキャラクター(文字形状やウェイト感)がかなりバラつくので、コントロールしておきたいのです。

結論。 96ppiはうざいですね。WindowsXP日本語版を対象にするのはほんとにうざい。まあ、諸悪の根源はMS Pゴシックなんですが......。
アンチエイリアス文字表示万歳。ヒラギノ万歳、メイリオ(一応)万歳です。

※1 たいていは、「dpi(dots per inch)」と書かれることが多いようですが、やはりここはppi(pixels per inch)でしょう。
※2 Appleの液晶モニタの解像度が72ppiだ、ということではありません。いまどきそんな粗い液晶モニタはありません。
※3 USの単位では、1pt=72分の1インチとなります。何進法だよ。あ、12進法の6倍か。
※4 Macintosh版もWindows版もどちらも同じです(検証終わってません)。
※5 Vistaであれば、[個人設定]→[DPI スケール コントロール パネル]を使ってDPIスケールを変更できます。ただし、大きく(粗く)することができるだけで、デフォルトの96ppiが最小値のようです。72ppiとかにはできません。
※6 昔のブラウザは、想定する画面解像度を変更できたような気がします。Macintosh版のIEなどがそうだったように記憶しています。
※7 絶対値指定の文字サイズのユーザー側の制御、ブラウザの機能が充実してきたので「文字大きくしたい人」問題はさほど重要でなくなった気はします。
※8 検証画面です。(実質的に)px指定は結局pt換算値を四捨五入して表示されていることがわかります。

上記は未検証な部分も多く、関連する疑問はほかにもありますが、今日はここまで。

Ubuntu+OSX fonts

| トラックバック(0)

Dellなどから出ている、netbookが欲しくてたまりません。特にOSにUbuntuを使用した超低価格モデルがすごく気になります。

サブマシンの場合、webブラウザとメディアプレーヤーさえあれば大半の用は済むので、私的にはOSは何でもいいのです。暇と根気(と英語力)があれば、OSX86で無理やりOSX化もいいですが、以前挫折してますし、非力なnetbookでは使い勝手がスポイルされそうです。

お金を出して重いVistaを入れるのもバカらしいですし、いまさらXPを入れてもあまりうれしくありません。で、Ubuntu、というわけです。

ただ、OSは何でもいいのですが画面の描画にはこだわりたい。特にフォント表示。品質の高い日本語書体や欧文書体を、きれいなアンチエイリアシングで表示させたいのです。

そこで(ライセンス的には完全に真っ黒ですが、あくまでも実験として)、OSXの書体をUbuntuにインストールしてみました。下の画像がその検証結果です。OpenTypeのヒラギノ角ゴシックPro、TrueTypeのLucida Grandeを入れてみています。

(クリックでSafariも含めた比較画像を表示します)

左がUbuntu+OSX fonts、右が通常のOSX。ブラウザはどちらもFirefoxの最新版です。アンチエイリアスの方式が異なるのでUbuntuの方はやや細めでクリスプ、WindowsのClearTypeに近い描画です。文字サイズ/文字間などは完全に一致します。

なかなかいい感じです。「Ubuntuでよりコストパフォーマンスの高いnetbook」、ありだと思いますが、どうでしょう。

////////////////////////////
以下は余談です。

◎頭の片隅で「そんなにOSXがいいならMacintoshでいいんじゃない?」「XPとSafariの組み合わせの方がきれいで快適なんじゃない?」などといった声も聞こえます。すいません。安いものが大好きなんです。

◎以前、DellのVostro 1200にUbuntuをインストールして使っていたこともありましたが、売り払ってしまったので、いまはないのです。

◎欧文のLucida Grandeですが、OSXだと.dfont形式なのでUbuntuでは認識されないようです。ここではWindows版Safariに含まれている.ttf形式のLucida Grandeを利用しています。

◎Ubuntuにフォントをインストールする場合、homeに「.fonts」などの不可視フォルダをつくり、その中に格納するのがよいようです。また、インストール後にフォント キャッシュの再構築が必要です。

sudo fc-cache -f -v

◎以上の検証はすべてMacBook ProにインストールしたVMware Fusion上のUbuntuで行っています(おいおい、それでまだノートが欲しいっていうのか)。

prototype.js

| トラックバック(0)

prototypeのサイトを見ていて気付きました。備忘録です。

......。あれ?

ウホッ!!いい男。ではなくて......。

↑これ。

......。「→」って欧文フォントで普通に表記できたんですね......。ソースをみると、はぁ、「→」ですか......。英語サイトで使用されているのは初めて見た気がします。「→」でググると、ふむふむ......。改めて、勉強不足でした。

また、こちらを見ると、特定のフォントだけに用意されたキャラクターでないこともわかりました。う〜ん、勉強不足だなぁ。

Firefox 3.0

| トラックバック(0)

Macintosh版のFirefoxですが、3.0になり、2.0以前とくらべて、font-familyの解釈が大幅に変わりました。
備忘録として、書き留めておきます。

font-familyの指定は、Macintosh用ファミリーネーム(英語)を使用します。

例えば、ヒラギノ角ゴシックProであれば、「Hiragino Kaku Gothic Pro」がMacintosh用ファミリーネーム(英語)です。

この指定のみで、Firefox 3.0とSafari 3.1.1に対応します。

さらに、Firefox 2.0やOpera 9.5も対象ブラウザとしたいのであれば、もう一つ、フルフォントネーム(日本語)も併用します。

例えば、ヒラギノ角ゴシックProであれば、「ヒラギノ角ゴ Pro W3」がフルフォントネーム(日本語)です。

それ以外の記述は、無駄に重複するか単に機能しないかのどちらかなので、必要ありません。

「ヒラギノ角ゴ Pro」不要、「HiraKakuPro-W3」不要、「Hiragino Kaku Gothic Pro W3」不要です。

「ファミリーネーム」、「フルフォントネーム」って何だ、という方は、以前のエントリー、「フォント名はいくつある?」をご覧ください。

Adobe Fireworks CS4 Beta

| トラックバック(0)

Adobe Fireworks(CS4)Betaを早速インストールしてみました。
......。結論から言えば、全くの期待はずれでした。

「PhotoshopやIllustratorと同じTypeエンジン」、絶対嘘です。
もしこのままの仕様で正規版、日本語版がリリースされるのであれば、バージョンアップの意味は全くありません。


(良い点)

  • チェックボックス「Auto kern(自動カーニング)」が、日本語フォントでも機能します。

(ですが)

  • 自動カーニングと手動カーニングは併用できません
  • 自動カーニング後、1箇所にでも手動カーニングを加えると、文字ブロック全体の自動カーニングが強制的に解除されてしまいます(トラッキングが0に戻る)。
  • 「自動カーニング+手動カーニングの併せ技で仕上げ」、「自動カーニングのまま、全体的に空け気味に」とかはできません
  • 「合成フォント」機能はありません
  • 「オプティカル」「メトリクス」など、プロポーショナルの種類を選んだりはできません

......。日本語版もこのままなのでしょうか。

あんまりにもがっかりして、速攻でアンインストールしたのでキャプチャー画面も全くとっていません。
近年まれに見るでっかいがっかりです。

ちなみに、その前のがっかりといえば、......Fireworks CS3 日本語版です。

Windows Vistaの新しい欧文フォントがなかなかいい。

どれもClearTypeでの表示に最適化してあるはずなのだが、やっぱりSafari(webkit)のレンダリングの方がキレイなので、Safari 3.1Windows版での表示をキャプチャーした。

上から、
ルーク・デグルートの「Calibri(カリブリ)」
ジェレ・ボスマの「Cambria(カンブリア)」
ガリー・ムンクの「Candara(カンダラ)」
ルーク・デグルートの「Consolas(コンソラス)」
ジョン・ハドソンの「Constantia(コンスタンティア)」
ジェレミー・タンカードの「Corbel(コーベル)」
ユーザーインターフェイス(UI)フォントの「Seoge(シーゴー)」

解説は丁寧にまとめられたこちらを見ていただいた方がよいので省略。ほとんどこちらの内容を書き写したようなもの。

ちなみに、Windows Vistaで閲覧できる方は画像でなくこちらのhtmlもご覧ください。IEとSafariの文字レンダリングの違いがよくわかります。