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

ずいぶん前に、Webフォントを導入してみた「Noto Sans Japanese」: Jkun Blog と云う記事を書いたが、「Windows 10 Fall Creators Update」を契機に再び「Noto Sans Japanese」を導入することにした。

グーグルが提供する「Noto Sans Japanese」。6934文字に削減したサブセット版。ウェイト (太さ) は7バリエーション。1ウェイトあたり約4.5MB。前回導入時は、7バリエーションすべてをロードしていたが、当ブログでは「レギュラー」「ボールド」の2バリエーションしか使用しておらず、無駄なロードがなされていた。

今回は、この点に注意して、スタイルシートを書き換えてみた。

/*
http://fonts.googleapis.com/earlyaccess/notosansjapanese.css
ここから、必要なウェイトのフォントセットだけ抽出して、ロード時間を短縮する。
「font-display: swap;」ロード完了までの代替フォント指定。
*/

@font-face {
   font-family: 'Noto Sans Japanese';
   font-style: normal;
   font-weight: 400;
   src: url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Regular.woff2) format('woff2'),
        url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Regular.woff) format('woff'),
        url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Regular.otf) format('opentype');
   font-display: swap;
 }

@font-face {
   font-family: 'Noto Sans Japanese';
   font-style: normal;
   font-weight: 700;
   src: url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Bold.woff2) format('woff2'),
        url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Bold.woff) format('woff'),
        url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Bold.otf) format('opentype');
   font-display: swap;
 }

/*
'Lucida Grande', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3' ----- Mac
'Noto Sans CJK JP' ----- Linux Ubuntu系ディストリビューション
'Noto Sans Japanese', Meiryo メイリオ ----- Windows
*/

body, input, textarea {
	font-family: 'Lucida Grande', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'Noto Sans CJK JP', 'Noto Sans Japanese', Meiryo, メイリオ, sans-serif, serif;
}
pre, code, var, samp, kbd, .mono {
	font-family: Consolas, 'Courier New', Courier, Monaco, monospace;
}

↑ 「font-display: swap;」・・・ウェブフォントのロードが完了するまでは、代替フォントで表示することを指示する。Windows であれば「 font-family:」の優先順位から「Meiryo, メイリオ」が採用される。但し、この機能はブラウザに依存する。 (Chrome の場合 Ver.60 以降なら機能する。)

↓ Windows 10 Chrome 環境での実際の表示例。 クリックすれば原寸サイズで表示。ブラウザに依存することなく、どのブラウザでも同じ品質で表示される。

2017-10-21_16h19_41.png

フォントのロード時間に関しては、気になる程ではないことを確認している。ただ、Googleのサーバーに依存すると云うことは理解しておく必要はある。

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

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

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