Loading…

WordPress カスタマイズ カスタマイズ 伝えたいこと 備忘録

webフォントNoto Sans Japanese

webフォントNoto Sans Japaneseがとても綺麗

このセッションは  IPv4  で確立しています

本日の人気記事BEST10

所要時間目安:3

This session is using  IPv4  is established in

この記事は2016年4月1日のものです。現在は状況が異なる可能性がありますのでご注意ください。

WordPress カスタマイズ カスタマイズ 伝えたいこと 備忘録

webフォントNoto Sans Japanese

目次に行く・戻る

webフォントNoto Sans Japanese

以前にwebフォントの導入方法を記載しました。

こちらでは、
webフォントのubuntuを使用しています。

しかし、
ひょんなことからwebフォントでNoto Sans Japaneseというとっても綺麗なフォント(webフォント)があるのを知りました。

この記事を読む方へのオススメ

それは、RBB TODAYのメルマガでサイトを訪れた時です。

なんかやけにフォント(文字)が綺麗だなぁ…。(・・;

と思いソースを拝見させていただきました、。

そしたら、
見たことのないフォント名がありました。

 

それが、
Noto Sans Japaneseというwebフォントです。

もうwebフォントに関してはどのようなものなのか説明は不要かと思いますのでしませんが、

スポンサーリンク

アドセンス336pxPC閲覧記事下表示1つ目コード


Noto Sans Japaneseに関しての説明はWikipediaのものを以下に引用させていただきます。

 

世界中の言語をサポートすることを目標に、Apache License 2.0 のライセンスで配布が開始された。2015年9月29日に、SIL Open Font License 1.1 にライセンス変更。 コンピューターで表示できない文字がある場合、文字の代わりに小さい四角(□)が表示されることが多いが、Googleではそれを"豆腐"と呼んでおり、Webから取り除くためにNoto(no more tofu)フォントを作った

ということですが、

具体的な使い方(方法)は以前の記事と同様です。

ただ、
まだ正式版?ではないようで、
Early Access!にて公開されています。

Google FontのNoto Sans Japanese

正規版は、
GoogleFontsに現在2016年4月1日時点で708種類のフォントがあります。

 

しかし、
ほんとに綺麗です!!

当サイトでも導入してみようと思い導入してみたのですが、
今までのwebフォントのubuntuに慣れたせいかNoto Sans Japaneseはとっても綺麗なのですが、
inline-heightが若干違ったのでちょっと元に戻してしまいました。

^^;

でも、
明日にはNoto Sans Japaneseにしちゃっているかもしれません。

だって、
本当にとっても綺麗なんだもん!!

びっくりしました。

当サイトでNoto Sans Japaneseを導入した際のスクリーンショットです。

webフォントNoto Sans Japanese

そして、
以下がwebフォントubuntuでのスクリーンショットです。

webフォントubuntu

この画像を見ていただくと一目瞭然ですが、
明らかにNoto Sans Japaneseの方が綺麗です。

しかし、
CSSで調整すれば良いのですが…。

横幅がちょっとだけ広く感じてしまいました。

時間のある時にNoto Sans Japaneseにしたいと思っています。

 

一応具体的な導入方法です。

 

@import url(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
 * {
 font-family: "Noto Sans Japanese",sans-serif;
 }

上記コードを、
CSSに追加するだけです。

 

この場合だと、
font-familyにNoto Sans Japanese以外にsans-serifしかないので、

最悪の場合はMSゴシップとかになっちゃうこともあるようです。

なので、
一応、ローカル内にもあるフォントも指定しておいた方が良いのかと思われます。

* {
 font-family: "Noto Sans Japanese","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"MS Pゴシック",sans-serif;
 }

といった具合にです。

そうすれば、
Macではヒラギノ角ゴが、
Windows7(WindowsXPでもメイリオ導入済み)以降はメイリオにて表示されます。

 

唯一、
webフォントのデメリットとして良く多くのサイトで書かれていますが、
私がこれまでwebフォントのubuntuを使用してきてページ表示速度が遅いなぁ。

とは感じたことはありません。
(鈍いだけかなぁ…。)

 

参考サイト)

今日は、Webフォントの話題を。日本語Webフォントは、「使いたい、でも重くなるからちょっと」という人が多いと思います。でも、グーグルがクラウド上でWebフォントを提供し始めたことで……。
45


アドセンス336pxPC閲覧記事下表示1つ目コード

関連記事

熊本城

伝えたいこと 備忘録 時事ネタ

熊本城石垣崩れるが復元可能ロンブー淳さんお手伝いしたいと。

昨日の熊本地震にて、 震度7という大きな揺れの地震で歴史的建造物であり3大名城(4大名城とも言われるが)である熊本城の石垣が壊れた・崩れてしまいました。 熊本城の別名「銀杏城(ぎんなんじょう)」。 ち…

もっと読む

インフィード広告アドセンス

所要時間表示閲覧時間表示

WordPress カスタマイズ 伝えたいこと 備忘録

記事の閲覧時間や所要時間の目安を表示する方法(今は需要ないかも…。)

以前は結構流行っていた「この記事は何分で読めます。」という閲覧所要時間表示と言うものがあります。 ユーザビリティの為に概ねの記事の文字数で「何分何秒」と表示させていたアレです。 しかし、最近ではそのナ…

もっと読む

インフィード広告アドセンス

ページ表示速度高速化

Stinger6 Stinger7 WordPress インターネット カスタマイズ テーマ 伝えたいこと 備忘録

ページ表示速度高速化レンダリングブロック解決方法ができた!!

ふぅ~ε=(・ρ・*) フゥ、やっとできた!! ここ数日なんとかサイトのページ表示速度をできるだけ速く高速化したいなぁ。とずぅ~っと考えていました。今日も昨日も記事にしていますが^^;)(汗)…。おそ…

もっと読む

インフィード広告アドセンス

おかしな日本語の使い方

伝えたいこと 備忘録 時事ネタ

なんとなくおかしな日本語の使い方と正しい日本語の使い方

昨今では、「全然(ぜんぜん)」◯◯という言葉がある意味では普通になってきています。私の覚えている限りではおおよそ10年くらい前からでしょうか…。そもそも、「全然」という言葉は基本的には否定形な意味合い…

もっと読む

WordPress, カスタマイズ, カスタマイズ, 伝えたいこと, 備忘録」同じカテゴリーの記事一覧


おすすめの記事一部広告

    Multiplex 広告

アクセスランキング

目次に戻る

よろしかったらシェアよろしくお願いします。

-WordPress, カスタマイズ, カスタマイズ, 伝えたいこと, 備忘録
-,

目次に戻る

目次に戻る


コメントを閉じる

comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください