源ノ角ゴシックとNoto Sansをcssで指定

源ノ角ゴシック(Source Han Sans)とNoto Sans内のメタデータを調べたので、cssのfont-familyとしてあてがってみました。

源ノ角ゴシックとNoto Sansをcssで指定してみるテスト

◎確認するにはあらかじめフォントをインストールしておく必要があります。

Preferred Family(日・英の2つ)だけが「ファミリー」でフォントを命名していますが、それ以外はウェイト込みの名称となります。源ノ角ゴシックは「Normal」、Noto Sansは「Regular」を使用しました。

異なるnameIDに対して同じ命名(文字列)をしている箇所も多いので、実際には数個(源ノ角ゴシック:5個)で済みました。Noto Sansは言語別の命名をしていないのでさらに少なく(Noto Sans:3個)なります。

  • 源ノ角ゴシック(Windows用・日本語・Preferred Family)
  • 源ノ角ゴシック Normal(Windows用・日本語・Full font name 兼 Family name)
  • Source Han Sans J Normal(英語・Full font name 兼 Family name)
  • Source Han Sans J(Windows用・英語・Preferred Family)
  • SourceHanSans-Normal(Postscript name)
  • Noto Sans Japanese(Windows用・Preferred Family)
  • Noto Sans Japanese Regular(Full font name 兼 Family name)
  • NotoSansJp-Regular(Postscript name)

複数のOS、ブラウザで表示を確認してみていますが対応はバラバラです。昔からちっとも変わっていません。ざっくり調べてみたところ、

Macintosh Chrome:

  • Source Han Sans J(Windows用・英語・Preferred Family)
  • SourceHanSans-Normal(Postscript name)
  • Noto Sans Japanese(Windows用・Preferred Family)
  • NotoSansJp-Regular(Postscript name)

Macintosh Safari:

  • Source Han Sans J(Windows用・英語・Preferred Family)
  • SourceHanSans-Normal(Postscript name)
  • Noto Sans Japanese(Windows用・Preferred Family)
  • NotoSansJp-Regular(Postscript name)

Macintosh Firefox:

  • 源ノ角ゴシック(Windows用・日本語・Preferred Family)
  • 源ノ角ゴシック Normal(Windows用・日本語・Full font name 兼 Family name)
  • Source Han Sans J Normal(英語・Full font name 兼 Family name)
  • Source Han Sans J(Windows用・英語・Preferred Family)
  • SourceHanSans-Normal(Postscript name)
  • Noto Sans Japanese(Windows用・Preferred Family)
  • Noto Sans Japanese Regular(Full font name 兼 Family name)
  • NotoSansJp-Regular(Postscript name)

Windows Crome:

  • 源ノ角ゴシック Normal(Windows用・日本語・Full font name 兼 Family name)
  • Source Han Sans J Normal(英語・Full font name 兼 Family name)
  • SourceHanSans-Normal(Postscript name)
  • Noto Sans Japanese Regular(Full font name 兼 Family name)
  • NotoSansJp-Regular(Postscript name)

Windows IE11:

  • 源ノ角ゴシック(Windows用・日本語・Preferred Family)
  • 源ノ角ゴシック Normal(Windows用・日本語・Full font name 兼 Family name)
  • Source Han Sans J Normal(英語・Full font name 兼 Family name)
  • Source Han Sans J(Windows用・英語・Preferred Family)
  • Noto Sans Japanese Regular(Full font name 兼 Family name)
  • Noto Sans Japanese(Windows用・Preferred Family)

Windows Firefox:

  • 源ノ角ゴシック(Windows用・日本語・Preferred Family)
  • 源ノ角ゴシック Normal(Windows用・日本語・Full font name 兼 Family name)
  • Source Han Sans J Normal(英語・Full font name 兼 Family name)
  • Source Han Sans J(Windows用・英語・Preferred Family)
  • Noto Sans Japanese(Windows用・Preferred Family)
  • Noto Sans Japanese Regular(Full font name 兼 Family name)

の記述が有効でした。ただし、「Preferred Family」が機能してもその際に表示されるウェイトはまちまちです。

ウェイト含めて意図通り表示させようとするとさらにブラウザごとの表示が変わります。

源ノ角ゴシックExtraLightとNoto Sans Thinをcssで指定してみるテスト

実際に使う際には、複数の名称を重ねる必要があります。また、ユーザーが源ノ角ゴシック/Noto Sansのどちらをインストールしているかはわからないので、両方とも記述する必要があります。エラーの発生する(が反応してしまう)指定を先に記述すると、意図する表示が実現しません。

さらに、Bold(<strong>タグ)の再定義も必要だと思います。

游ゴシック体/游明朝体をWebで利用する

游ゴシック体/游明朝をWebで使う方法。OSX版。

新しいOSX Mavericks(10.9)には「游ゴシック体」と「游明朝体」が搭載されました。
font-family: の指定でhtmlにも使えます。

(游ゴシック体html表示サンプル|OS 10.9以降で表示)

イオンPBは「責任は全てイオンがもちます」を大前提に、製造元も原産国も記載していなかった筈なのに、いざ食品偽装が起きた途端、納入業者に責任丸投げとかなかなか清々しいクズ

(游明朝体html表示サンプル|OS 10.9以降で表示)

イオンPBは「責任は全てイオンがもちます」を大前提に、製造元も原産国も記載していなかった筈なのに、いざ食品偽装が起きた途端、納入業者に責任丸投げとかなかなか清々しいクズ

css記述時には、游ゴシック体は「YuGothic」、游明朝体は「YuMincho」となります。
英語用の「ファミリーネーム」を利用しています。

游ゴシック体 ミディアム

游明朝体 ミディアム

<strong>タグも機能しますが、游明朝体の太字はデミボールドなので差がわかりづらく、強調表現としては使えないかもしれません。

ちなみに、Windows 8.1にも游ゴシック体/游明朝体が搭載されましたが、ウェイトが微妙に異なるようです。そのようなつぶやきを見つけました。游ゴシック体 ボールドと游明朝体 デミボールドのみ、同じウェイトです。

デバイス文字のMac/Win統一のためにこの書体を利用できるかと思いましたが、ちょっと難しそうです。

131031|追記 Windows環境やブラウザの対応を考慮した記述方法についてはこちらが詳しいです。
131101|追記 Dutch Type LibraryのOTMasterというソフトでフォント情報を調べてcssの指定方法を詳しく解説した記事を見つけました。

サブピクセルレンダリングはオワコン

サブピクセルレンダリングは終了モードでした。3年遅れて気づきました。

サブピクセルレンダリングは2010年頃からオワコンだったのですね。
3年以上のタイムラグですが、気がつきました。

2010年末にtweetした方が「今さら」とおっしゃっています。

改めてAppleのサイトを見たところ、base.cssのなかに通常のアンチエイリアスで表示するための記述、

-webkit-font-smoothing: antialiased;

を見つけました(※1)。

iPad(※2)の発売が2010年1月なので、その頃にはすでに準備はできていたのでしょう。

文字のなめらかさの追求はretinaディスプレイにまかせ、トリッキーなサブピクセルレンダリング表示はいずれやめてしまうつもりだったのですね。現行モデルのMacBook Pro Retinaディスプレイモデルはまだサブピクセルレンダリングが有効ですが、デフォルト値も変わるかもしれません。

そのオワコンの仕様を使い続ける(※3)ためのこちらの記事「Snow Leopardのサブピクセルレンダリングの設定」がいまだにアクセスが多かったりするのですが……。

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

※1 webkitでサブピクセルレンダリングを含むアンチエイリアスの制御方法については以下のサイトがわかりやすいと思います。
Test page for -webkit-font-smoothing | Christoph Zillgens
こちらのサイトの記事(2011年頭の記事……)からたどって見つけました。

※2 iOSはディスプレイを回転させるのが前提なので、もとからサブピクセルレンダリングには非対応です。

※3 サードパーティ製外部ディスプレイへのサブピクセルレンダリング表示の停止は、てっきり純正購入への囲い込みかと思っていました。

サイト内の関連記事についてはタグ「サブピクセルレンダリング」をご覧下さい。

三点リーダ 他

三点リーダ、欧文書体をあてがうと、ベースラインまで下がります。あ、記事作成中に解決方法を見つけた。他のキャラクターはどうしよう。

(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で入力)]に近いサイズまで縮小してしまいます。
  • 同じく[ ][ ]などの「しかく」も小さく[ ■ ][ □ ]なります。
  • 註釈の頭などに付ける[ ]「こめじるし」も小さく[ ※ ]なります。 アスタリスクのような大きさになります。

「ハック」なのであきらめるのが基本です(※3)。半角ピリオド三つ[ … ]のように見えますが、気にしてはいけません。行頭のバレットは素直に<li>を使います。めんどくさい方は[ ◎ ]や[ ◉ ]を使いましょう。こちらは縮小しません。

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

font-familyの先頭に欧文書体を置いて和欧混植風な文字組みを行うのはポピュラーなテクニックですが、その際にどの文字種が和文書体と異なる表示になるかを調べる(※1)には、メニューバーの入力メニュー「文字ビューア」を使うと一目瞭然です。「三点リーダ」は英語では「HORIZONTAL ELLIPSIS(省略記号:水平)」と記載(※2)されています。

文字ビューア

※1
とは言うものの、欧文の三点リーダは基本、ベースラインに揃うタイプです。このエントリーを書くきっかけになったブログ小粋空間の記事、三点リーダが真ん中に表示されない理由の記事、に例示されている「三点リーダが真ん中に表示されるフォント」は汎用ファミリー(generic-family)やシステムフォントでフォント名ではありません。Lucida Grandeが含まれているのは単なる間違いと思われます。また、MS UI Gothicは和文フォントです。

※2
厳密には異なるようです。テクニカルな解説としては、エリプシス(ellipsis)と三点リーダ – Mac OS Xの文字コード問題に関するメモが大変参考になりました。

※3
三点リーダだけならば、

(U+22EF)の「⋯」を使うだけ

で解決するようです。「三点リーダの表示位置」問題を完全かつ最終的に解決する – めもおきばに方法が記載されていました。辞書登録しなくては。丸や四角など、他のキャラクターは見つけることができるでしょうか。「文字ビューア」で探してみることにします。あ、Androidだとダメですね。表示されません。グリフが用意されていないようです。

AquaKanaを普通に使う。

htmlで表示できるフォントなら、リッチテキストエディタで利用できます。

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

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

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

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

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

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

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

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

一度お試しあれ。

Point vs Pixel

OSX、Adobeは72ppi、Windows、ブラウザは96ppi。困った。

(補)書いた後で読み返してみましたが、我ながらたいへんわかりづらい内容ですね。
一言でいえば、
「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換算値を四捨五入して表示されていることがわかります。

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

font-familyの指定方法(エントリー「Firefox3」のつづき)

font-familyを記述するにあたり、フォント名のどの部分を指定すべきかよくわからない。だが少なくとも、Firefox 3であればどのフォント名で指定しても大丈夫。すべて「フォントファミリー」として認識される。

だいぶはっきりしたのですが、まだ、エントリーをまとめきれません。Windowsも含めた検証がすんだら再度アップしますが、Macintoshのみの検証結果は以下のようになります。

実用面でいえば、今までと特に結論は変わらず、

font-family: Macintosh用ファミリーネーム(英語), フルフォントネーム(日本語)

で指定すればOKです。

具体的な検証結果としては、

◎Macintosh版 Safari(3.0.4)は、

  • Macintosh用ファミリーネーム(英語)を「ファミリー」として理解する。
  • フルフォントネーム(英語)兼PostScriptネームを「単独のフォント」として理解する。
    そして、「ファミリー」を理解できずに<strong>をブラウザのデフォルトフォントで表示する。

◎Macintosh版 Firefox(3.0b2)は、

  • Windows用ファミリーネーム(日本語)を「ファミリー」として理解する。
  • Macintosh用ファミリーネーム(日本語)を「ファミリー」として理解する。
  • フルフォントネーム(日本語)をなぜか「ファミリー」として理解する。
  • フルフォントネーム(英語)兼PostScriptネームをなぜか「ファミリー」として理解する。
  • Windows用ファミリーネーム(英語)を「ファミリー」として理解する。
  • Macintosh用ファミリーネーム(英語)を「ファミリー」として理解する。
  • 要はどのフォント名称でも「ファミリー」として理解する。

◎Macintosh版 Firefox(2.0.0.11)は、

  • フルフォントネーム(日本語)を「単独のフォント」として理解する。
    そして、「ファミリー」を理解できずに<strong>を疑似ボールドで表示する。

◎Macintosh版 Opera(9.25)は、

  • フルフォントネーム(日本語)を「単独のフォント」として理解する。
    そして、「ファミリー」を理解できずに<strong>をスルーしてとぼける。

ようです。

以下のような方法で検証しました。

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

以下は検証方法です

まず、検証用にフォントを作成しました。

「作成しました」といっても、既存のフォントOTEditを利用して切り貼りしただけです。ヒラギノ角ゴシックProをベースに、欧文はLucida Grande、かなはAquaKanaを利用してます。

文字の形状はある意味どうでもよいのですが、フォントファイルに埋め込まれる各種の名称をいろいろ変えて、レギュラーとボールドの二つの書体を「ファミリー」として、つくったわけです。

↑こんな感じです。判別しやすいようにかなりストレートな名称にしています。

↑太字の方は別の名称にしましたが、「ファミリーネーム」はそろえてあります。

↑ファミリーのどのウェイトになるかはこちらで設定します。レギュラーのウェイト設定です。 080707追記(+画像変更)「中」だと実際には「中太(デミボールド)」相当として扱われるようです。ヒラギノW3も「細」であることから、「細」に変更しました(「書体名…/詳細…」の各種フォント名称は「中」のままです)。

↑ボールドのウェイト設定です。

上記のフォントに埋め込んだ様々な「名称」フォント指定(font-familyの指定)を行い、htmlを作りました。

意図通りにこのフォントで表示されれば、その記述がブラウザが「理解できる」フォント指定方法です。

様々な「フォント名」で「font-family」を指定。

↑私自身の備忘録としてのページです。上記のフォントをインストールしていないはずのあなたの画面では、単にブラウザのデフォルトフォントで表示されるだけです。すみません。