(こちらは旧blogのコンテンツです)
(Windowsやrssのフィードだと記事内容がわかりづらいと思います。OSX上のブラウザでご覧ください)
このブログのfont-family設定ですが、Lucida Grandeを先頭に持ってきています。
font-family: 'Lucida Grande', 'Hiragino Kaku Gothic ProN'……(以下略)
OSXでご覧の方は英数字がLucida Grande、和文がヒラギノ角ゴシックProNの和欧混植になっているはずです。Appleのサイトをまねています。
残念ながら、こちらはAdobeアプリで言うところの「合成フォント」とは異なり、先頭で指定した欧文書体(Lucida Grande)に含まれないキャラクターを、次に指定した和文書体(ヒラギノ角ゴシックProN)で埋めていく、あくまでも擬似的なものです。いわゆるハックです。
文字種単位での指定ができないため、いくつかのキャラクターが意図しない表示になります。
- 文末でよく使う 「三点リーダ」[ … ]がLucida Grande[ … ]で表示されてしまいます。ボディ中央でなくベースラインまで下がってしまいます。
- [ ● ][ ○ ]などの「まる」が小さく[ ● ][ ○ ]なってしまいます。欧文のバレット[•(option+8で入力)]に近いサイズまで縮小してしまいます。
- 同じく[ ■ ][ □ ]などの「しかく」も小さく[ ■ ][ □ ]なります。
- 註釈の頭などに付ける[ ※ ]「こめじるし」も小さく[ ※ ]なります。 アスタリスクのような大きさになります。
「ハック」なのであきらめるのが基本です*1
。半角ピリオド三つ[ … ]のように見えますが、気にしてはいけません。行頭のバレットは素直に<li>
を使います。めんどくさい方は[ ◎ ]や[ ◉ ]を使いましょう。こちらは縮小しません。
font-familyの先頭に欧文書体を置いて和欧混植風な文字組みを行うのはポピュラーなテクニックですが、その際にどの文字種が和文書体と異なる表示になるかを調べる*2 には、メニューバーの入力メニュー「文字ビューア」を使うと一目瞭然です。「三点リーダ」は英語では「HORIZONTAL ELLIPSIS(省略記号:水平)」と記載*3 されています。
*1:三点リーダだけならば、(U+22EF)の「⋯」を使うだけで解決するようです。「三点リーダの表示位置」問題を完全かつ最終的に解決する - めもおきばに方法が記載されていました。辞書登録しなくては。丸や四角など、他のキャラクターは見つけることができるでしょうか。「文字ビューア」で探してみることにします。 あ、Androidだとダメですね。表示されません。グリフが用意されていないようです。
*2:とは言うものの、欧文の三点リーダは基本、ベースラインに揃うタイプです。このエントリーを書くきっかけになったブログ小粋空間の記事、三点リーダが真ん中に表示されない理由の記事、に例示されている「三点リーダが真ん中に表示されるフォント」は汎用ファミリー(generic-family)やシステムフォントでフォント名ではありません。Lucida Grandeが含まれているのは単なる間違いと思われます。また、MS UI Gothicは和文フォントです。
*3:厳密には異なるようです。テクニカルな解説としては、エリプシス(ellipsis)と三点リーダ - Mac OS Xの文字コード問題に関するメモが大変参考になりました。