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

This Category : 未分類

ふぉんとにマニアックなフォントの話 4(完結編)

Webフォント問題、クリアしました~~! ヾ(*>Д<*)ノ゙

ノーコンテニューで決めてやれませんでしたけど、
やっと、やっと、やぁぁぁぁっと、
サブセットフォント適用成功です!!

▶これまでの経緯
1.Webフォントのサブセットフォントを作る
2.FC2ブログのファイルアップロードではフォントファイルは対象外と知る
3.フォントファイル置き場の外部サーバー(無料)なんて無いと諦める
4.GoogleフォントURLのWebファイルをブログに適用
ふぉんとにマニアックなフォントの話

5.改めて無料サーバーを探し、Firebaseに到達
6.Firebaseのホスティングサービスにサブセットフォントをアップ
7.WEBページでWebフォントが反映されない
はしゃぐウサギとその後のフォント

フォントファイルが壊れているのだろうかと怪しんだりもしたのですが、
試しに@font-faceのsrc指定を下記のようにローカル指定で試してみました。
src: url(file:///C:/Users/usapooh/webfonts/NotoSansJP-Light.otf)
すると、ちゃんとWebフォントで表示されたので、ファイル自体は大丈夫そう。

FirebaseへのURLがおかしいのかと怪しんでファイルへのURLをブラウザに貼り付けると、ちゃんとダウンロードしようとするのでURLは問題なし。


色々調べて、下記のサイトに辿りつきました。
SNSボタンやWebフォントが表示されないときのよくある原因と対処法
自サーバーに置いたWebフォントを読み込めない時の対処法


クロスドメインとかいうやつが、原因なのではないか??
それをどうにかするには、.htaccessファイルに記述すればいいのね。うん。

けれど、Firebaseに.htaccessをアップしても何も変わらず。

そもそも、Firebaseって.htaccess対応しているのか???
『Firebase htaccess』とか『Firebase Apache』などとGoogle先生にお伺いを立てるも、英文のサイトばかり出てくる上に、翻訳をかけてもちっとも答えが見つからない。

Access-Control-Allow-Originの値をどうにかしたいんだよ~~!
『Firebase Access-Control-Allow-Origin』と検索してみたところ、
firebase.jsonという設定ファイルがヒット。

あっ! これがFirebaseでの.htaccess(のようなもの)なんじゃないの?!


ってなわけで、firebase.jsonの "hosting": { } 内に、下記コードをカキカキ。
"headers": [ {
  "source" : "**/*.@(eot|otf|ttf|ttc|woff|woff2|font.css)",
  "headers" : [ {
    "key" : "Access-Control-Allow-Origin",
    "value" : "*"
  } ]
}

これをデプロイして確認すると、
沈黙していたサブセットフォントが顕現!!!

オォォーーー!! w(゚ロ゚;w(゚ロ゚)w;゚ロ゚)w オォォーーー!!

全私が泣きましたよ。長かったぁ~~~~っっ 。゚(PД`q*)゚。




実は、Firebaseでホスティングできるようになるまでで一度挫折していました。

FirebaseでWebサイトを無料でサクッと公開してみる』でサクッと紹介されている内容を参考にして挑んだのですが、
私はちっともサクッとできなかったのですよ。

Firebaseでホスティングする手順
01.Firebaseに登録(Googleアカウントがあれば無問題)

02.FirebaseにWebサイト用のプロジェクトを新規作成

03.Node.js / npmをインストールする

04.コマンド『npm install -g firebase-tools』で(何かを)インストール

05.コマンド『firebase login』でFireBaseにブラウザログイン

06.コマンド『firebase init』でプロジェクトを初期化開始

07.コマンド画面に選択肢(Database/Hosting)がでるので
"Hosting"を選択してEnter

08.コマンド画面にプロジェクト選択肢がでるので
02で作ったプロジェクトを選択してEnter

09.他にも色々コマンド画面で聞いてくるのをとりあえず全部Enter!(恐怖)

10.パソコンにできたpublicフォルダの中身を修正(index.htmlなど)

11.コマンド『firebase deploy』でFirebaseにWebページを適用

04.『npm install -g firebase-tools』でつまづきました。
他のサイトでは、インストールしたNode.jsでコマンドを入れるみたいな表現に見えたのに、全く反応せず。
上記のサクッと紹介されたページでは特に記載はないですし。

検索したら、英語のページばかりでYou Tubeの動画がヒット。
それを観たらコマンドプロントから実行するという罠だったという……


今までホームページのファイルアップロードといえばFTPしかやってこなかったので、めっちゃ戸惑いました。
しかも、デプロイした後のFirebaseの管理画面、ファイルの一覧とか確認出来ないし (゚Д゚;)
ファイル数しか見えないのですか、実は出来るんですかね??

私のような素人が手を出すには、Firebaseはちょっとハードルが高かったですけど、飛び越えずにパタパタ倒しながらもゴールは出来たって気分です (≧∀≦;)


小文字のl(L)の形が気に入らないとか言っていた問題も、Droid Sansで解決しましたし。
Noto Sansを試したら、顔文字でよく使う「 ´ 」「 ` 」が字が詰まっておかしくなってしまいました (´・ω・`)?)

は~ 良かった。

めでたし、めでたし(?!)
スポンサーサイト
COMMENT : 0
TrackBack : 0
CATEGORY : 未分類 | THEME : webサイト作成 | GENRE : コンピュータ |

ふぉんとにマニアックなフォントの話 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 : コンピュータ |

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

前回のあらすじ
ブログにWebフォントを使おうと思うけど重い。
軽くするためのサブセットは、第一水準漢字だけで良い?

第一水準漢字って言われて、大抵の人はピンとこないと思います。

私は仕事柄、文字コードに携わっているのである程度の知識はありますが……
第一水準に含まれる漢字が何かは、IMEの文字パレットから確認することができます。

IME 文字パレット
ちなみに、Microsoft IMEでのサンプル(クリックで拡大)。

Microsoft IMEでは第一水準を「漢字1」と表記していますね。

漢字には、第二水準もあります(Microsoft IMEでは第一水準を「漢字2」)。

第二水準の文字は切り捨てても、たしかに大抵の文字は問題ないように思います。
試しに第二水準の漢字を見てもらうとわかると思うのですが、義務教育では習ってこなかった漢字ばかり目に入ってくるのです。
異字体とか、旧字体とか。例えば「獸」もそうです(「獣」の旧字体)。


そうなんですけど、馬鹿にできないのが第二水準漢字。

第二水準の中には義務教育で習う常用漢字も含まれているのです。
びっくりしますが「丼」って第二水準漢字なのですよ。

さらにびっくりするのが「苺」
これは第二水準漢字で、常用漢字には該当しないという……。
えー? 苺ってそうなの?!って思っちゃいました。
(でも人名漢字なんですね)


完全に蛇足ですが、第三水準・第四水準漢字も存在します。
結構目にする「﨑」「德」「劦」などがそうです。
ややこしいのですが、「髙」はまた別のもの(IBM拡張漢字)です。
文字入力の変換候補に出てくるので、普通の文字だと思いがちですが、実は機種依存文字になります。

ここまではShift-JISと呼ばれる文字コードでの話で、もっともっと多くの文字を対応しているUnicodeの規格もあったりして……
「𠮷」「♬」「❤」などはUnicodeになります。
Unicodeは顔文字などに結構使われていたりするんですよね~ ꒰⚈◡⚈๑꒱



………なんだか、熱くなってしまいましたが。

『とりあえず第一水準漢字だけでOK』という扱いはいかがなものなのか、と言いたかったわけです。はい。

もちろん、第一水準以外に常用漢字の差分などを追加してサブセットする、としているところもありました。

ただ、常用漢字や人名漢字で差分を機械的に抽出することは可能でも、そこから漏れて紛れている馴染みのある漢字を、3390字(第二水準漢字)の中から精査するってもう、私の根性では無理ゲーじゃない…? (=A=)


そんなわけで。
Webフォントをサブセットするなら、第一水準と第二水準の漢字の両方あった方が、良いという結論に私は至りました。
漢字以外には、半角全角の英数記号カタカナひらがな等を含んで、サブセットフォントメーカーを使い軽量化したフォントを作成。

その後、また問題に直面。


fc2ブログ、フォントファイルはアップロードファイルの対象外だという事実。


サブセット作ったのに、使えないじゃんっ!
(都合の良い外部サーバーなどないよぉぉ)



……またまた次回に続きます! (・ω・)ゞ
COMMENT : 0
TrackBack : 0
CATEGORY : 未分類 | THEME : 雑記 | GENRE : コンピュータ |

ふぉんとにマニアックなフォントの話 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 : コンピュータ |

プロフィール

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:自宅警備員


最新のコメント


カテゴリ


タグクラウドとサーチ


リンク


月別アーカイブ

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