Loading…

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

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

本日の人気記事BEST10

所要時間目安:3


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

webフォントNoto Sans Japanese

webフォントNoto Sans Japanese

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

ブログやホームページを運営していくにあたり時折他のPCで自分のブログやホームページを表示した所、 自分のPCでの文字表示(フォント)が異なってしまいデザイン自体が崩れた

こちらでは、
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フォントを提供し始めたことで……。


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

おすすめの記事一部広告

    Multiplex 広告

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


関連記事

市川海老蔵妻小林麻央さんの病状について

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

小林麻央さんの病状も気になるが北斗晶さんの病状も気になる…。

私の従兄弟のお嫁さんが数年前に片方の乳房、そして今年両方の乳房を全摘手術…。再従兄弟も2年前に乳がんが発覚し片方の乳房を全摘手術したこともあり・・・・・・。 先日、夫の市川海老蔵さんが会見を開いて、 …

もっと読む

Windowsプロダクトキー確認方法

PC Windows10 備忘録

Windows10,Windows8.1プロダクトキー確認方法

多くの場合WindowsOSはメーカー製品のPCにプリインストールされていることがほとんどだと思います。 (自作パソコンを除いてです。) Windows7ですとコマンドでプロダクトキーの確認をするコマ…

もっと読む

コメント欄を開閉式にする方法

STINGER PLUS+ Stinger6 Stinger7 WordPress カスタマイズ 伝えたいこと 備忘録

Stinger6,Stinger5,StingerPLUS+コメント欄を開閉式スライドにする方法

前々から気にかけてどうにか出来たらいいなぁ…。なんて思っていたコメント欄です。 コメント欄を非表示にしてしまうというのもありかなぁ。と思ったこともありましたが、 いくつかのブログにてコメント欄が開閉式…

もっと読む

PC Windows10 不具合 伝えたいこと 備忘録 設定

Windows10で動かないアプリを動かす方法2

先日も書きましたWindows10の不具合?に関することです。 不具合と言うのか仕様と言えば良いのかわかりませんが、とにかくWindows10にアップグレードしたりWindows10に若干古めのアプリ…

もっと読む

目次に戻る

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

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



この記事が良かったら
いいね!お願いします(#^.^#)

WordPressデビュー津々浦々の
最新情報をお届けします

言えないことはTwitterで!!



目次に戻る

目次に戻る


コメントを閉じる

comment

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

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