【WEBフォント】Noto Sans系日本語フォントは結局どれを使えばいいのか検証してみる | oku-log
「Noto Sans」とは GoogleがAdobeと共同開発したフォントファミリー。 webフォントで日本語が使えるメリットは大きいので積極的に使っていきたいところです。 しかし、「Noto Sans」はとにかく種類が多い… ほぼ同じ内容なのにGoogleとAdobeで名称が異なり、さらにその中でも似たようなフォント名で分かれているので非常にややこしいです。 結局どれを使えば良いのか。 今回はwebフォントとして使用をする前提でそれぞれの違いと用途による使い分けを検証してみたいと思います。 どれだけの種類があるのか ざっくり「Noto Sans」=「Source Han Sans」=「源の角ゴシック」ではあるのですが、Google側ではNoto Sans、Adobe側では源ノ角ゴシック（Source Han Sans）という名称でリリースされています。 さらに細かく分けると以下のようにな
Google Fontsで日本語フォントが正式サポート開始！使い方やダウンロード方法など | Web Design Trends
Google Fontsが提供する日本語フォント Google Fontsで2018年9月現在提供されている日本語フォントは、下記の8種類です。 Noto Sans JP Noto Serif JP M PLUS 1p M PLUS Rounded 1c Sawarabi Mincho (さわらび明朝) Sawarabi Gothic (さらわびゴシック) Kosugi Kosugi Maru それぞれのフォントの特徴は、使い方の後でご紹介していきたいと思います。 まず、Google Fontsの日本語フォントの使い方をチェックしていきましょう！ Webフォントとして日本語のGoogle Fontsを使う方法 最初にご紹介するのは、WebフォントとしてのGoogle Fontsの使い方です。 日本語のWebフォントは文字数が多いため通信量が多くなってしまいます。ファイルサイズやページの読み
文字詰めできるCSSのfont-feature-settingsが凄い！ 日本語フォントこそ指定したい自動カーニング - ICS MEDIA
游ゴシックではプロポーショナルメトリクスは効果的 WindowsやmacOSに搭載されている游ゴシック体は、仮名が漢字に対してかなり小さめにデザインされています。游ゴシック体ではヒラギノ書体より字間が開いて見えてしまうため、プロポーショナルメトリクスを活用する効果は大きいです。 Webフォントにもプロポーショナルメトリクスは効果的 デバイスフォントだけでなく、Webフォントでもプロポーショナルメトリクスに対応したOpenTypeフォントがたくさんあります。Webフォントに関しては記事「Webフォントサービスの徹底比較！ 和文フォントが使える5つのサービスの利点まとめ」を参考ください。 ▲左側は未指定（和文等幅）の状態でカタカナの開きが大きい。右側はプロポーショナル字形を適用した状態で、カタカナが詰まっている。 対応環境：ほぼすべてのブラウザで利用可能 これだけ便利なCSSですが、どれだけの
ローカルに"Noto Sans CJK JP"がなければWebフォントの"Noto Sans JP"を利用するCSSの指定方法 - Qiita
ローカルに"Noto Sans CJK JP"がなければWebフォントの"Noto Sans JP"を利用するCSSの指定方法fontwebfont 2018年6月29日現在、ウェブフォントの「Noto Sans JP」で字詰めできなくなっていることを確認しました。 Googleが仕様を変更したのかもしれません。 "Noto Sans JP"のウェブフォントを利用すれば、すべての機器で文字表現を統一できます。 しかし、日本語のウェブフォントは容量が大きいです。 すでにローカルに"Noto Sans CJK JP"がインストールされているなら、ウェブフォントを読み込まずにそちらを利用したい。 そんな要望をかなえる方法です。 結論 "Noto Sans JP"のCSSにlocal("Noto Sans CJK JP <太さ>")を追加するだけです。 元となるCSS 改変したCSS 表示確認用の
【フォント】Webフォントとして，Noto Sans JP をあてた
このサイトの基本フォントはヒラギノ角ゴ ProN W3であったが，ヒラギノがインストールされていないWindows環境では游ゴシックが使われていた． Google Chromeでこの游ゴシックがかすれて見づらいという問題があったため，WebフォントであるNoto Sans JPをあてることにした． １．CSSの更新 を参考に，以下のフォントを当てる． @import url(//fonts.googleapis.com/earlyaccess/notosansjp.css); .hoge { font-family: 'Noto Sans JP', "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, "メイリオ", Meiryo, sans-serif; } ２．比較 太さ，ブラウザの対応状況の比較． [nor
[CSS]Noto Sans JP のwebフォントを利用する方法｜CSS｜WEBデザインの小ネタとTIPSのまとめサイト「ウェブアンテナ」
Noto Sansは、全言語対応を目指してGoogle とAdobe が共同開発したオープンソースのフォントで、Webフォントとして無料で提供されています。全言語対応を目指しているだけあって、当然日本語（和文）フォントも利用可能です。 今回はそんなNoto Sansフォントを、ブログやWEBサイトで手軽に利用する方法を紹介させていただきます。 Noto Sans JP (japanese) フォントのインポート まずはご利用のCSSファイルに以下のインポート文を追加して、Noto Sansフォントを使えるようにします。 @import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css); CSSファイルではなく、HTMLファイルの<head>内にlinkタグで指定する場合は↓こちらです。 <head> <link href
![[CSS]Noto Sans JP のwebフォントを利用する方法｜CSS｜WEBデザインの小ネタとTIPSのまとめサイト「ウェブアンテナ」](https://cdn-ak-scissors.b.st-hatena.com/image/square/9f16119926b6b13a450a147b6cb2b70bf07f6cb6/height=288;version=1;width=512/https%3A%2F%2Fwww.webantena.net%2Fwp-content%2Fuploads%2F2015%2F01%2Fgooglenotofonts.png)
[最新版] Noto Sans JapaneseをWebフォントとして使う方法
Notoフォントは全ての言語に対応することを目指す野心的なフォント。GoogleとAdobeが共同開発したこのフォントは無料で利用できる。 ※Adobeからは、『源ノ角ゴシック』として提供されている。 プログラミング用フォント『Source Code Pro』を開発したAdobeが関わっているおかげか、Notoフォント自体非常に美しい。 そんなNotoフォントは『Google Noto Fonts』なるプロジェクトで無料で公開されている。 Google Noto Fonts 今回は、このフォントをWebフォント ―すなわち、外部からダウンロードして使うフォントとして使う方法を紹介する。 実は面倒くさい、WebフォントでNoto Sans Japanese Type SquareやFONTPLUSなど、Webフォント提供サービスは数多く存在する。サイトを見る端末にフォントがインストールされて
日本語ウェブフォント「Noto Sans Japanese」の指定方法（なぜか日本語に適用されない方向け）
概要 ▶ ウェブフォント「Noto Sans Japanese」（源ノ角ゴシック）を指定したつもりが、うまく指定できていない方向け。ドキュメントはよく読まないとダメですな。 ●Noto Sans Japaneseの指定方法はDTP Transitを新潟グラム × DTP Boosterの懇親会の時に、スピーカーの鷹野さんに「Noto Sansってウェブフォントの指定の仕方が分からないんですよ～」と質問したら「あ、それならDTP Transitのサイトソースを見てみて」と言われました。って、今さらって感じですが、その内容について書きかけだったので、書き終えて年末を終わろうかと。 実際、DTP Transitのサイトソースを見たら指定の方法は分かりました。 DTP Transit でも、この指定の方法って正式なモノなのか？って思ってしまいました。 （見たい人は http://www.dtp-t
大阪のホームページ制作会社プラスデザインカンパニーのブログ Vol.1
プラカンブログ ホームページ制作に関する役立つ記事からおもしろ記事など。 プラスデザインカンパニーの スタッフによるブログです。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブフォント Noto Sans JPを使う 2019年新春
待望の正式版！WebフォントNoto Sans JPの使い方・ダウンロード方法を紹介！