local(‘😀’) の持つ意味

かつて Web フォントを使用する上でブラウザのレンダリング エンジンがまだ成熟しきっていなかった頃。それはバグとの戦いの歴史でもありました。

Web フォントが登場し世の中の Web デザイナー・デベロッパー陣営は、画像化テキスト(<img>)や背景画像置換テキスト(negative text-indent & background-image)という実装・運用コストを増大させる人類共通の敵から、我々の時間と金を取り戻すであろうそれに、まさに究極兵器になり得ると期待を寄せたものです。

しかし。まだ早すぎた。

……!! 腐ってやがる

期待が高いあまり実装を急いだ各種ブラウザーがレンダリング エンジンの成熟を待たずにリリースしたため、Web フォントは方々でバグを引き起こす結果となり別の戦いを強いられることにもなりました。

それらは

  • Safari と IE 6〜8 で Web フォントの font-variant が無視される
  • IE で font-style が無視される
  • IE でさえサポートしている @font-face をブラウザの雄 Chrome が未実装
  • OpenType の挙動が不安定(Safari, Firefox, Opera)
  • IE は @font-face の family-name が 31 文字より多いと無視される
  • IE は EOT しかサポートしないにも関わらず OpenType や TrueType のフォントファイルまでダウンロードし無駄にネットワーク帯域を使用する
  • Windows 環境での Web フォントの描画が絶望的に汚い

など一つ一つは小さなものでしたが何しろ数が多かったために対処に難儀する状況でした。

そのなかでも Web フォントと同名のフォントがローカルである Mac や PC にインストールされている場合の挙動は深刻で

  • WebKit と FontExplorer X 等のフォント管理ソフトウェアとの間でローカル参照に不具合を発生させ、Web タイポグラフィー史上最悪に切なくて泣けるとされる(か知らんけど)「Aブロック」置換バグが発生
Fec7R.ChromeError.png (attachment)
  • FontExplorer X などフォント管理ソフトウェアがインストールされている環境で、ローカル側のフォントが非アクティベート状態だとフォントのアクティベートを求めるダイアログボックスが問答無用でポップアップする(WebKit)

など散々であったようです。

Web デザイナー・デベロッパーが虚無感に打ちひしがれる中、それでも諦めない多くの有志がその解決に試行錯誤を重ねた結果、クリティカルであった「Web フォントと同名のフォントがローカルにインストールされている」状況下での様々なバグを回避できるトリックがついに発見されるに至りました。

そのエクスカリバーの一刀こそ

local('☺︎')
To account for this gotcha, I’ve specified a local font name of ☺︎. Yes, it’s a smiley face. 
(Bulletproof @font-face: Smiley variation)

でした(かわいい)。

@font-face 宣言内の src プロパティにこの指定があるだけで、Aブロック置換バグが回避されたり IE が無駄に帯域を使用しなくなったりと問題が解決され、世界は一時安息の時を迎えることができました。

仕組みとしては複雑で僕もあまり深く理解できていませんが、OpenType フォントが ☺︎ のような 2 バイトコードのフォント名を受け付けないことが関係しているようで、この指定があるとローカルへのフォントの参照がキャンセルされつまりは

  • @font-face で宣言する Web フォント名がローカルに存在しないことを保証する
  • ローカルに同名のフォントが存在しても、サイト内では Web フォントのファイルを使用する

というような意味合いで働くことになったようです。2 バイトコードであれば良いので別に ☺︎ である必要もないはずですが、発見者に敬意を示して慣習的に従うウェブ コミュニティの在り方は結構好きだ。

その後 Web フォントに関連する様々なバグはレンダリング エンジンのレベルで根本的に解消され実用に至っていることから最近ではあまり見かけなくなりましたが、僕の知るところ世界でも指折りの大企業が今もまだ愛用を続けているようです。

@font-face {
font-family: 'SF Pro Display';
font-style: normal;
font-weight: 100;
src: local('☺︎'),
url("/wss/fonts/SF-Pro-Display/v1/sf-pro-display_ultralight.woff") format("woff"),
url("/wss/fonts/SF-Pro-Display/v1/sf-pro-display_ultralight.ttf") format("truetype");
    /* (C) 2015 Apple Inc. All rights reserved.*/
}

アップルですね。スタイルシートの URL としては http://www.apple.com/wss/fonts?families=SF+Pro,v1|SF+Pro+Icons,v1 ですがブラウザからのアクセスには制限がかかって見られず、デベロッパーツールからは参照が可能となっています。

フォントのパースの際にローカルへの参照がキャンセルされるため、多少なりとも描画の実行速度が速くなるなど影響が出てくるものなのでしょうか。

Like what you read? Give ONO TAKEHIKO a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.

Responses
The author has chosen not to show responses on this story. You can still respond by clicking the response bubble.