Hiragino Kaku Gothic Interfaceを普通に使う。

以前の記事、AquaKanaを普通に使う。の再利用です。
Yosemite(OSX 10.10)限定です。

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

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

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

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

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

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

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

※1 Pagesなどでも使えます。さらに、iOSにも搭載済みの書体なので、iCloudを経由してiOS版Pagesなどでも使用できます。

なんでできるの? と思った方は、上記の記事または、タグ:AquaKanaの記事などをお読みください。

源ノ角ゴシックと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の指定方法を詳しく解説した記事を見つけました。

三点リーダ 他

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

(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」などのリッチテキストフォーマットを扱えるエディタにペーストします。

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

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

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

一度お試しあれ。

Firefox 3.0

Firefox3のリリースにより、font-familyの指定方法は変わりました。OSXだけの話ですが。

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」不要です。

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

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」を指定。

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