フォントの最近のブログ記事

Windows限定で、インストールされているフォントのリストを取得し、ネットに公開し、しかもJIS90/JIS2004の判別までできるサイト

http://instfont.info/

を作っていたのですが、恥ずかしながら、5/14にサーバのyum updateをしたら、動かなくなってしまっていました。

原因は、mod_securityというApache用セキュリティモジュールと、Perl風正規表現処理モジュールPCREの動作の整合性が取れなくなっていたというものでした。

今回気が付いたのは、

-- Your PC's Font Viewer!! -- [font.colorfull.jp]

というサービスが出てたので、自分が作ったサービスに似てるなーとか思って、自分の方を使ってみたら死んでた、というものでした。お粗末。

セミナーレポート「パソナテックセミナー:広がる"日本語Web Fonts"の世界 Webデザインに"フォント"を取り入れるとは?」 #typesquare - DTP Transit [www.dtp-transit.jp]

日本語Web Fontsを使っている場合、いったんデバイスフォントで表示された後、日本語Web Fontsに切り替わるのが不自然だという問題がありますが、

DOMができてから(ページ表示後という意味に近い)、JavaScriptによりDOM内からTypeSquareで生成すべき文字を集めてPOST送信して、レスポンスとして得られた、オンデマンドで生成されたCSS

@font-face {
	font-family: 'Soft Gothic Bold';
	src: url(data:font/woff;base64,d.....
	........=);
}

を割り込ませることでフォントの差し替えを行っているのですけれども、毎回それを行っているのが遅い原因。DOM構築後でしか文字種特定できないことと、TypeSquareのレスポンスがボトルネックとなっています(正確には、ボトルネックにならないように非同期=並列で動いているので、後から差し替わって見える)。

生成されたCSS(dataスキーム化されたウェブフォントを含む)をHTMLに最初から書いておく、というのをブラウザのデバッグツールで試したところ、遅延なくフォントが適用されることを確認。

つうわけで、TypeSquareから返ってきたCSSをサイトのローカルにキャッシングして、最初はローカルキャッシュのほうを参照するような変更をすると、気になる遅延は克服できそうです。

規約でそういうのがやっていいことになっているかどうかは、知らん。

DTP Transitを見て知ったのですが、

モリサワのWeb Fonts「TypeSquare」、Windowsでの表示品質が向上 - DTP Transit [www.dtp-transit.jp]

とあるように、WindowsにおけるTypeSquareの表示品質が改善されたとのこと。

~~~

で、一次情報に当ろうと思い、TypeSquareのサイトに行ってみると、URLの設計がおかしい。

モリサワのTypeSquareの登録で、「御社のユーザ登録ではパスワードは平文で記録されていますか? それとも何らかのハッシュ化をしていますか?」という質問をしようと思っていて今まで忘れていたのでまだ登録していないのですが(なんでモリサワに対してそんなに厳しいんだ)、個人じゃない分で既に使っているので、品質や動作を見ているのですが、なるほど、Windowsのブラウザでは軒並み品質がいまいち、ていうのはわかりました。

んで、ブラウザのデバッグ機能を使うとどういう挙動しているかわかるのですが、JavaScriptでフォントが使われる箇所の文字と、ブラウザの種類やOSの種類をかき集めてTypeSquareのサーバに送信し、後から@font-faceやらdataスキームなどを含んだCSSを差し込んでいるのですね。道理で後からフォントが変わるはずだ。

で、Windowsだとこんな手間をかけていてこんな品質なので、いっそのことフォントじゃなくて画像をオンデマンド生成するようにした方がいいんじゃね、とか思いました。

昔、あらかじめ全ての文字を書き出しておいてJavaScriptで差し替えるという

M.C.P.C.: CSS Spriteを使って、いにしえのフォント画像テーブルを使ったフォント表示に挑戦

ていうのを作ってみたわけですが実用的ではないし何より商用フォントでやるとアウトだと思うので、せっかくだからウェブフォントにこだわらず、画像で配信する、ていうのもありじゃねーかなーとか思う。まあ、ムリかなーとも思います。

モリサワTypeSquareの使用権を回してもらったので(自分個人の使用権はまだモリサワさんが+付きメールアドレスに対応できていないので保留中)、ログインしてどうやってTypeSquare使うようにできるかとかを確認したのですが、気になったのが、自分のサイトに貼るJavaScriptのURLについて。

TypeSquareが自動生成したURLなのだけれども、表示されるのがhttp://から始まるURL。そしてその下に「SSLページで使う時はhttps://に」という旨の説明が書いてあったような気がします。

これはダサい! httpsページに貼る時は人間が気を配らなくてはならないという点がダサい!

こういう場合は、http: とか https: とかのスキーム名をとっちゃうといいんですよね。というわけで

    <script type="text/javascript" src="//typesquare.com/accessor/script/typesquare.js?●●●●●●" charset="utf-8"></script>

こんな感じにしてみた。とりあえずhttpのページからはちゃんと読みこめているみたいです。

Typesquaremailaddresserror

モリサワのウェブフォントサービス、TypeSquare(http://typesquare.com/)にて、ユーザ登録時にメールアドレスにプラスを含む場合、登録できないという問題があるのを質問してたのですが、返事が来てました。

曰く、「アドレス内の『+』記号が、 弊社メールサーバで利用できない記号」とのことで、利用できないんだそうです。

というわけで、プラスがないメールアドレスで登録すればよいとなむ。

で、それはいいとして、話題はモリサワ社がプラス付きのメールアドレスに対応すべきであるという話に移る。

いまさらモリサワTypeSquareなのです。

TypeSquare [タイプスクウェア] [typesquare.com]

今日登録をしようと思っていろいろ個人情報を入力しているのですが、なんで全角を強要するインタフェースなんですか。

そこら辺の議論は5年ぐらい前にJavaScriptやらサーバサイドで統一すればよくね? ていう議論は終わっているはずでして、実際僕もフォーム作る用事があったので実装してみたことがあります。

M.C.P.C.: フォームのメールアドレスはJavaScriptで能動的に半角に変換してみるとどうだろう

それよりも、メールアドレスに+が付いていると登録できないという問題があるんですね。

頭にきたので問い合わせしました(←相変わらず沸点低いな)

Morisawatypesquareregistration

結構Gmailのアドレスに+付ける運用ってやっているよね?

ソース見たら、

                "email": {
                    // Simplified, was not working in the Iphone browser
                    "regex": /^([A-Za-z0-9_\-\.\'])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,6})$/,
                    "alertText": "* メールアドレスが正しくありません"
                },

だそうです。まあ確かにメールアドレスのバリデーションってルールよくわからんから出来合いのもの使いがちですよね……

(書き換えちゃえば送れてしまったのであろうか……)

そもそも、モリサワの見出ミンMA31なんて、横棒が極端に細すぎる書体なわけですが。

ともかく、モリサワTypeSquareの明朝体が、Windows版Google Chromeで見るとひどいらしいのですが、

モリサワTypeSquareを比較してみる [wakufactory.jp]

ウェブフォントじゃなくて実フォントで見たらどうなるかというテスト。

~~~

まず、ウェブフォント。

Morisawatypesquare01s
▲横棒が飛んでーら

次に、OpenTypeフォント。

Morisawatypesquare02s
▲見えたっ!

つうわけで、実フォントだとちゃんと見えるので、モリサワさんは、ウェブフォントの場合どうして横棒が飛んで見えるのか、説明したほうがいいと思いました。おそらく公式ルートでまともに回答できるフォントベンダーなんて、モリサワさんぐらいだと思うし。

んーこれタイポスだよなータイポスっぽいんだけどーとか思っていろいろ探していたのですけれども、濁点が斜めであり、タイポスとは違うので、じっくり探してみたら、モリサワフォークでした。

モリサワ基本書体のみで何とかする文化なので、フォークとか入っておらず、忘却しておりました。

  • タイポス:濁点が垂直
  • フォーク:濁点が斜め

原稿をトレースしようと思ったんだけれども、9ポの文字のFAX原稿なので無理でした……

フォークと判明した後、MORISAWA PASSORTがある本社のほうに連絡して文字打ってもらいアウトライン化してもらいました。モリパス完備のところっていいよね。

モリサワ クラウドフォントサービス「TypeSquare」を開始 | フォント製品 | 株式会社モリサワ [www.morisawa.co.jp]
モリサワ 「TypeSquareオープン記念¥0キャンペーン」を発表 | フォント製品 | 株式会社モリサワ [www.morisawa.co.jp]
モリサワがクラウドフォントサービス“TypeSquare”の詳細を発表:聞いてきたことをまとめてみる - フォントブログ [blog.petitboys.com]

僕からは一点。

業務でXHTML5(ちゃんとapplication/xml+xhtml吐いて作るのは結構難しい)のサイトにこっそりGoogle Web Fontsで欧文フォントにウェブフォントを使ったんですけれども、IE8で見たら冬期休業期間の数字が欠落しやがりまして、怒られたんです。制作している時はOperaで確認しているので気付きませんでした(←ダメだろ)。

というわけで、モリサワのサービスに限らず、ウェブフォント使ったら価格に使っていた数字が欠落したとか言うとひどいことになるので、テクノロジーが公開されて、文字欠落の可能性があるかどうか判断できればいいなあとか思いました。

もっとも、¥0キャンペーンがあるので、四の五の言わず使ってみればいいような感じもしますね。個人サイトで使うとして、ドメインいっぱいあるんだけれども、どういう扱いなのかな。

月別 アーカイブ

ウェブページ

OpenID対応しています OpenIDについて
Powered by Movable Type 5.2.13

このアーカイブについて

このページには、過去に書かれたブログ記事のうちフォントカテゴリに属しているものが含まれています。

前のカテゴリはパソコン・インターネットです。

次のカテゴリは印刷です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。