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

スポンサーサイト

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

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

突然ですが、ブログにWebフォントを導入してみました。

今回の記事は若干ギークな内容となっております (・ω<;)

私のブログをリピートしてくれている方はお気づきになったかもしれませんが、記事の表示幅も広げたりと、今年に入ってから地味~に弄っていました。

前から、ちょっと思ってはいたのですけど……
レイアウトが旧時代(Windows XP時代)のままなのは、いい加減どうにかしたいなぁ、と。
基本フォントがMSゴシック指定だとか、表示幅が800pxだとか。

もう、Window 10の時代ですからね。


フォントを変えようと思った時、まず思いついたのがメイリオ。
WindowのOSの中で、Window 7のシェアがまだまだ大きいですし、Window 7ならメイリオでしょ。
でも、Window 10のシェアも伸びていくだろうし、そうなると游ゴシックもあり?
しかも游ゴシックはMacにもあると知って、共通のフォント使えるスゴ~イ!と、ちょっとテンション上がりました。

それで一旦、游ゴシックを指定してみようと試みたのですが、Window Chromeで表示される游ゴシックが線がほっそくなってしまって非常に見えづらい問題に直面。
游ゴシックをMedium指定にしてみる対策をしてみても、何かスッキリしない。

Window 10のシェアはまだWindow 7の半分ほどと考えて、游ゴシックは諦める?

そうなるとやっぱりメイリオ?
Macにはヒラギノ角ゴシック?

font-family: "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;

フォント設定のCSSが、なんかダラダラ長くなって嫌なんだよなぁ…… (´`)


そんなことをぼやぼや思いながらフォント設定について調べていた時に出会ったのが、Webフォントでした。

Webフォントなら、どのフォントがインストールされているかなど考えなくて良い。
しかも、フォントによって文字間隔が違うことで、ブログの紹介文やら横カレンダーが1行におさまらなかったりすることにモヤモヤしなくて良い。

いいじゃないかWebフォント!

しかもGoogle謹製の和文フォント「Noto Sans Japanese」、読みやすいし!!

君に決めた!!



そんな勢いで、Webフォント導入に向けて動き出すことに。
しかし、Webフォントにはデメリットもあったのです。

日本語フォントはサイズがデカイ問題。


Noto Sansの使い方を調べると、たいてい下記のコードを書けば良いと教えてくれます。

スタイルシートに記述する場合:
@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);

HTMLの内に記述する場合:
<link rel="stylesheet" href="http://fonts.googleapis.com/earlyaccess/notosansjapanese.css">

その上で、フォントを「Noto Sans Japanese」と指定すればOKだと(sans-serifはおまじない)。
font-family: 'Noto Sans Japanese', sans-serif;


で、これでページを表示するとですね……
3秒位、テキストが真っ白状態になるのです。

Webフォントをダウンロードしてから、フォントを指定した部分に適用するので、ダウンロード時間がかかっているのですね。
私はすべてのフォント(bodyタグ)をWebフォントと指定したので、本当に真っ白。

一度ダウンロードして、ブラウザにキャッシュしてもらえば……
もしくは、よそのサイトでNoto Sansをダウンロード済み(キャッシュ有)であれば、真っ白にはならないのですけど。
初回アクセス時に3秒も真っ白なのは、ちょっと、ちょっと、ちょっと。


フォントのサブセット処理をすれば軽くなるよ、という解決策もありました。

必要な文字だけを抽出したフォントファイルを作って、それをWebフォントとして使えば良いということです。
サブセットについて調べると、漢字は第一水準漢字があれば大抵の文字はカバーできるという記事をよく見かけたのですが、私はそこで躓き始めてしまったのでした。


……長くなってきたので、分割して次回に続けます! (・ω・)ゞ

※「Noto Sans JP」と「Noto Sans Japanese」が混同していたので修正しました(2017/4/2)
スポンサーサイト
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ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。