AdobeのEdge Codeの元である「Brackets」がバージョンアップしてたので、ついでに拡張機能を突っ込んでみることにしました。こちらに公開されている拡張機能の一覧があります。
ほうほうあるね、あるね。
Adobe Edge Web Fontsを試してみる
その一覧の中に「Edge Web Fonts」なんてのがあったので、ちょいと入れてみることに。
この公開されている拡張機能たちのインストール詳細はそれぞれのREADMEを読んでいただくとして、基本「~/Library/Application Support/Brackets/extensions/user/」の中に置いてあげれば良さそうです(Windowsの人は知りませんw)。そこのZipをダウンロードして解凍してもいいですけど、Gitを使ってる方は
git clone git://github.com/adobe/brackets-edge-web-fonts.git
とかでまぁ適当に。念のため、Bracketsを再起動すると、右上の方に「W」みたいなのがでてきますので、それをクリックすると説明が読めます。
CSSのどこか任意の場所で「font-family:」と入力すると補完が出てきて「Browse Web Fonts」の選択肢があるので、それを選ぶとこんなウィンドウが開きます。
使いたいフォントを選んだら「Done」をクリック。先程の「W」を一度クリックすると、JSのコードを教えてくれるので、今度はそれをHTMLにペーストしましょう。
head要素の中に貼り付けたらおしまいです。
Live Previewで確認すると、指定したWeb Fontsになってるのでオッケー。簡単ですね。
中には要Node.jsな拡張機能も
やはり時代は「Node.js」なんですねぇ。拡張機能の中には「Extension Manager」みたいな便利そうなのもあるんですが、残念ながらこれをインストールするにはあらかじめNode.jsを入れておかないといけません。そして、いわゆる黒い画面からもろもろ必要なパッケージをインストールする必要があります(npm installするだけだけど)。
いい加減あきらめて黒い画面ですよ、Webデザイナーの皆さんも。