Webフォントを導入してみた「Noto Sans Japanese」

ウェブサイトを構築する上で、悩ましいのがフォントである。ユーザーの環境によって使用できるフォントが決まるので、スタイルシートの”font-family”でそれらのフォントを並べて定義するしかない。こうなると、ユーザーの環境によって実際に表示されるフォントが異なることは、想像に難くない。

これはこれでそう云うものだと思えばそれまでであるが、それでもWindows環境におけるフォントの汚さにはガマンできないと云うユーザーも少なからず存在すると思っている。

そこで考えられるのが、Webフォントである。通常、ブラウザの表示には、パソコンにインストールされているフォントが利用される。一方、Webフォントでは、サーバー側で用意したフォントが使用される。よって、ユーザーの環境に関係なく同一のフォントで表示することが可能になるワケである。

筆者が利用したWebフォントは、グーグルが提供する「Noto Sans Japanese」。6934文字に削減したサブセット版。ウェイト (太さ) は7バリエーション。1ウェイトあたり約4.5MB。ブラウザのキャッシュに存在しないと、読み込み時間が気になるところではあるが、実際には違和感なく利用できるレベルである。

↓ Windows 10 Chrome 環境での実際の表示例。 クリックすれば原寸サイズで表示。

2016-01-28_09h01_23.png

導入は、極めて簡単である。筆者は、外部スタイルシートを使用しているので、その中で定義している。

@import url(//fonts.googleapis.com/earlyaccess/notosansjapanese.css);
@import url(//fonts.googleapis.com/css?family=Inconsolata:400,700);
/* @import url(//jkunblog.com/font/aozoramincho.css); */
/* @import url(//mplus-fonts.sourceforge.jp/webfonts/basic_latin/mplus_webfonts.css); */
/* @import url(//mplus-fonts.sourceforge.jp/webfonts/general-j/mplus_webfonts.css); */
/*
'Noto Sans Japanese'
'aozora-min'
'M+ C Type-1 (basic latin) Medium'
'M+ Type-1 (general-j) Medium'
*/

body, input, textarea {
  font-family: 'Noto Sans Japanese', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo,'游ゴシック', YuGothic, Osaka, 'MS Pゴシック', 'MS PGothic', Aria, sans-serif;
}
pre, code {
  font-family: 'Inconsolata', 'Noto Sans Japanese', monospace;
}
body {
  font-weight: 500; /* 少し太め */
  font-style: normal;
  font-size: 100%;
  line-height: 1.6;
  background-color: #FFF;
  color: #111;
  margin: 0;
  padding: 0;
}

これだけのことで導入できるので、一度試してみる価値はあるだろう。

※2017-10-21 その2 Webフォントを導入してみた「Noto Sans Japanese」: Jkun Blog

admin
カテゴリ:ブラウザ
2016/01/27 12:26 | コメント (0)
◎この記事へのコメントは 0 件です。コメント欄を表示しますか?
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

このブログについて
jkun-400x400.jpg インターネット, パソコン, スマホ, Windows, Linux, Android, 各種アプリ, ブラウザ, ブラウザ拡張機能, 携帯電話, 社会情勢, 韓ドラ, K-POP 関連の話題を取り上げます。ジャンルとしては幅広く、特定のカテゴリに特化したブログではありません。お時間がありましたら、どうぞお立ち寄りくださいませ。
プロフィール
カテゴリ
ブログ内検索
Powered by さくらのブログ