MMORPGを通じてリアルに結婚した、私と旦那とうさぎのうかつで愉快な日常です。
08« 123456789101112131415161718192021222324252627282930»10

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
CATEGORY : スポンサー広告 |

ふぉんとにマニアックなフォントの話 3

▶前回までのあらすじ

Google ドライブが以前は外部呼び出しを使えたみたいなのですけど。
他にもあてがないか調べたりしてみましたが、気持ちがくじけてしまい、サブセットフォントについては諦めることにしました。

さーて、そうしたら、もうどうしようか。

Noto Sans Japanese を使うための指定CSSについて再確認。
http://fonts.googleapis.com/earlyaccess/notosansjapanese.css

このファイルの中身を確認すると、7種類のウェイトが指定されてます。
font-weightプロパティで7種類の太さを指定できるわけです。
Noto Sans Japanese のフォントの太さ一覧

でも私、ブログで標準はともかくとして、太字指定くらいしかしていない。
基本的には、太字指定というより、文字の大きさを指定しているくらいだし。

2種類のフォントさえあれば良いのなら、
Webフォントの読み込み重い問題緩和されるのでは……?


と、いうことで。
オリジナルのCSSファイルを書き直すことにしました。

/* Noto Sans Japanese (japanese) http://www.google.com/fonts/earlyaccess */
@font-face {
    font-family: 'Noto Sans Japanese';
    font-style: normal;
    font-weight: 400;
    src: local('Noto Sans CJK JP Light'),
           url(http://fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Light.woff2) format('woff2'),
           url(http://fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Light.woff) format('woff'),
           url(http://fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Light.otf) format('opentype');
}
@font-face {
    font-family: 'Noto Sans Japanese';
    font-style: normal;
    font-weight: 700;
    src: local('Noto Sans CJK JP Bold'),
           url(http://fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Bold.woff2) format('woff2'),
           url(http://fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Bold.woff) format('woff'),
           url(http://fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Bold.otf) format('opentype');
}

テストしてからブログに反映させたのですが、
若干Boldフォントの適用にタイムラグがある程度で、標準のフォントが表示されるまでの時間は気になるほどではない……かも?
ブロードバンド回線だからかもしれませんが、ページの読み込みとフォントの読み込みは同時位に感じました。

サブセットフォントにはできなかったけれど、これなら……及第点、かな?
重い~と感じさせたら、スミマセン。


CSSの修正について。

基本は、標準(font-weight: 400)と太字(font-weight: 700)の抜き出しです。
元々標準で指定されているRegularはちょっと太く感じたので、LightとDemiLightと悩んだ末に、Lightを標準として指定(修正)しました。
あと、Noto Sans CKJ JPをパソコンにインストールされている方は、Webフォントではなくパソコンのフォントを表示されるようにsrcプロパティにlocalを指定しました。

補足ですが。
オリジナルのnotosansjapanese.cssの通り、全てのフォントを使いたい場合、
使用頻度の高いfont-weightから順番にCSSを書き直せば良いのではないかな?
と思ったりもしました。
(Thin、Light、DemiLight、Regularと4番目に読み込んだフォントが標準だから、3秒も真っ白だったんだな~と思ったので)


書き直したCSSファイルをFC2ブログのファイルアップロードにアップして、テンプレートのHTML編集で呼び出すように設定して完了!

めでたくブログのフォントをWebフォントに出来ました!!

思い立ってから、長かった~~~っっ


やっとこ目標達成なわけですが、
Noto Sans Japaneseの小文字のl(L)の形が気に入らないなぁ、などと思うところがあって、欧文フォントについてはもう少しいじることがあるかもしれません。
Noto Sans Japaneseの欧文


ふぉんとにマニアックなフォントの話にお付き合いありがとうございました!
スポンサーサイト
COMMENT : 0
TrackBack : 0
CATEGORY : 未分類 | THEME : 雑記 | GENRE : コンピュータ |

● COMMENT

Comment Form


秘密にする
 

● TRACKBACK

TrackBack List

プロフィール

usapooh
双方初彼氏彼女で2年と7ヵ月交際
2009年3月結婚。
2009年7月お家を購入!
ベビなし共働き中。
2013年1月うさぎのあんこ登場。

2014年12月旦那が不倫。
2015年5月別居開始。
2015年12月末、再構築へ。

● ぷちオタ家 ●
:usapooh
AGE:38歳
TYPE:典型的なO型
JOB:会社員(データ関連)

旦那:bayopooh
AGE:2年355日年下
TYPE:A型より(?)のAB型
JOB:フリーランス(SE)

あんこ(うさぎ)
AGE:2012年9月生
TYPE:ライオン混ドワーフ
JOB:自宅警備員


最新のコメント


カテゴリ


タグクラウドとサーチ


リンク


月別アーカイブ

08  07  06  05  04  03  02  01  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05 


お小遣い稼ぎ中

☆御用達アンケートサイト☆
めちゃオススメです!
マクロミルへ登録

☆御用達ポイントサイト☆
ダブルポイントでゲット!
ポイントサイト「Point Income」


Plus



上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。