Webフォントを導入してみた「M+ Web Fonts」 / 「Noto Sans Japanese」と比較

先に、Webフォントを導入してみた「Noto Sans Japanese」: Jkun Blog と云う記事を書いたが、今回は、M+ FONTS を導入してみた。

先に導入した、「Noto Sans Japanese」と比較すると ↓ にようなる。
Windows 10 Chrome 環境での実際の表示例。 クリックすれば原寸サイズで表示。

M+ Web Fonts」 / 'M+ C Type-1 (basic latin) Medium', 'M+ Type-1 (general-j) Medium', 'M+ C Type-1 (basic latin) Regular', 'M+ Type-1 (general-j) Regular'
2016-01-28_15h09_52.png

Noto Sans Japanese」 / font-weight:500;
2016-01-28_09h01_23.png

筆者は、外部スタイルシートを使用しているので、その中で定義している。

@import url(//fonts.googleapis.com/css?family=Inconsolata:400,700);
/* @import url(//fonts.googleapis.com/earlyaccess/notosansjapanese.css); */
/* @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: 'M+ C Type-1 (basic latin) Medium', 'M+ Type-1 (general-j) Medium', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo,'游ゴシック', YuGothic, Osaka, 'MS Pゴシック', 'MS PGothic', Aria, sans-serif;
}
h1, h2, h3, h4, h5, h6, address, table th, dl > dt, em, strong, cite {
  font-family: 'M+ C Type-1 (basic latin) Regular', 'M+ Type-1 (general-j) Regular';
}
/* IE10 */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  body, input, textarea, h1, h2, h3, h4, h5, h6, address, table th, dl > dt, em, strong, cite {
  font-family: 'メイリオ', Meiryo !important;
  }
}
/* IE11 */
@media all and (-ms-high-contrast:none) {
  *::-ms-backdrop, body, input, textarea, h1, h2, h3, h4, h5, h6, address, table th, dl > dt, em, strong, cite {
  font-family: 'メイリオ', Meiryo !important;
  }
}
pre, code {
  font-family: 'Inconsolata', monospace;
}
body {
  font-weight: normal;
  font-style: normal;
  font-size: 100%;
  line-height: 1.6;
  background-color: #FFF;
  color: #111;
  margin: 0;
  padding: 0;
}

「Noto Sans Japanese」と比較して、幾分クッキリ表示となる。

※今回に限ったことではないが、”IE” や ”Edge” には効果がなく、「M+ Web Fonts」だと「<br />」が変な記号に置き換わったりしてボロボロである。IE10, IE11 の場合は、メイリオフォントに変更するようにcssハック。Edge は未対応。

※最終的には、「Noto Sans Japanese」の「font-weight: normal; (font-weight:500; だと Chrome 以外では太すぎる)」に落ち着く。”IE” や ”Edge" でも、カスレはあるものの、まぁまぁの品質。また、「M+ Web Fonts」 + Firefox では文面文字にガタツキが見られ問題あり。

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

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

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