※ HTML5ロゴを使ったクレイジーな何か。 に応募したものです。
● We Love HTML5 LOGO! more. ●
https://chrome.google.com/webstore/detail/we-love-html5-logo-more/ipldhmeiifmgbfdjkonnpjcgegilpmmk?hl=ja
これを入れるとあら不思議。
すべてのWebページに 5 、 HTML5 という文字があったらHTML5ロゴになります。
!注意!
サイトの作りによっては適応されない場合があります。
例:amazon.com、google.com
上記が少々使いにくいと感じたり、普通にサイトを使いたいという方用に抑えたフォントサイズのものもご用意してあります。
● We Love HTML5 LOGO! ●
https://chrome.google.com/webstore/detail/we-love-html5-logo/dccieefclmgoommkpjjdppmdpbpgecim?hl=ja
!注意!
かなり自然に溶け込むサイズにしたため、忘れてこのまま画面キャプチャを送って大惨事にならないようにお気を付けください。
技術的に何をしてるかというと
- HTML5ロゴのSVGデータをSVGフォント用に変換
- Chrome機能拡張でロードされた時に「SVG FONTが含まれるSVG」と「bodyに対してfont-familyを適応するcss」を追加
細かい情報はあまりないので以下を参考に試行錯誤して微調整しました。
http://www.w3.org/TR/SVG/fonts.html
アイコンをFireworksでSVG出力してWebフォントに対応させる方法
ちなみに苦労したのがSVG FONTの作り方で、普通のSVGをFONTとして使うにはかなり厄介でIllustratorなどから吐き出した複雑な図形のSVGだとpathタグで吐き出されるためそのまま使えません。
SVG FONTの場合、svgのパスで d アトリビュートで作れる図形じゃないとだめなようで、変換が必要でした。
最悪手動で作ろうかと思ってたのですが、 IcoMoon App というサイトでうまいこと変換してくれるというのを知ってそこで変換しました。
0 件のコメント:
コメントを投稿