Webフォントのホスティング
Webフォントのホスティングのみを提供するようなサービス、つまりWebフォント専用のカスタムCDNを探していた。しかし、Webフォントがメジャーになったとはいえ、そこまでニッチなサービスはあんまりないようだ。代表的なものだとTypeFront。が、かなり制限厳しい。試してすらいないけど、$15/月は払わないとまともに機能しそうもないような仕様だった。 Webフォント専用にこだわらずに、GitHub PagesやDropboxを利用するという手もありそうだけど、Internet Explorer 9以降やFirefox 3.5以降におけるCORSによる制限に対応できない。また、パフォーマンスに難点があったり、Content-Typeでトラブりそうとかも。 Google Drive Google Driveだとどうかなーとテストしてみたら、Access-Control-Origin: *となっ
フォントの読み込み完了を検知する
TypeKitとかがやってるWebフォントの読み込みが終わったらhtml要素にクラス名を振るアレの話。TypeKitがオープンソースでリリースしているWebFont Loaderを使う方法が安全で安定。Googleがホスティングしているのもあるので手軽でもある。でも読み込み完了の検知以外にも機能があってパワフルすぎる気がするので、Adobe Blankを使って自前で書いてみることにした。 Adobe Blankのサイズ削減 Adobe Blankはそのまま使うと30KB以上ある。読み込み完了検知だけなら幅0のグリフが1つあればそれで良いので、まずはサブセット化してサイズを抑えることから。aだけのWOFFなAdobe Blankを作ればちょうど1KBくらいになる。 Download: adobe-blank.woff @font-face定義の追加 外部リクエストにすると意味が薄れるのでDa
HTTPリクエストを減らすために【WebFont編】ドラッグ＆ドロップしてコマンド叩いてウェーイ - MOL
このシリーズはHTTPリクエストの理解を通じてWebパフォーマンスの重要性について考える5章構成になっている。 【序章】HTTPリクエストは甘え 【CSS Sprite編】スプライト地獄からの解放 【WebFont編】ドラッグ＆ドロップしてコマンド叩いてウェーイ 【DataURI編】遅延ロードでレンダリングブロックを回避 【終章】我々には1000msの猶予しか残されていない 3日目は、スマホ環境であればHTTPリクエストを減らすためにWebフォントの採用を考慮しても、やぶさかではないだろう。 まずは下記の画像をご覧頂きたい。 これはプロジェクトで私が使用していたスプライト画像だが（実際は縦にして使用）、このような単純な形状、単色のアイコンであれば、Webフォント化したほうがなにかと都合がよい。 このスプライトであれば、カラー × 矢印の向き × シャドウの有無 パターンの可能性があり、スプ
【前編：フォント作成】アイコンをWebフォント化してリクエスト数の削減とRetina Displayに一発対応 | DevelopersIO
みなさんこんにちは、高速化やSCSSの記事を書いている野中です。 ↑の絵が何かわかる人いますか？ マインクラフト(Minecraft)界隈でおなじみの愛されキャラ「匠」こと「クリーパー」さんです。 とっても長い前振りなので時間のない方は本題まですっ飛ばしてください。 マインクラフトとは わかりやすく解説されているニコニコ大百科を引用。 Minecraft（マインクラフト）とは、Notch（Markus Persson氏）と氏の会社であるMojangからリリースされた、サンドボックス型のものづくりゲームである。 レトロゲーを想起させるドットテイストの3Dブロックが溢れる世界で、建物やその他のものを自由に創造することが出来るゲーム。 家を作ったり、川を作ったり、山をつくったり、洞窟を作ったり、トロッコ坑道を作ったり、ゾンビを倒すためのトラップを作ったり、塔を作ったり、農場を作ったり、天空の城を
Webフォントで簡単にアイコン表示 | 株式会社ツクロア
アイコンをWebフォントで表示させたサンプルです。 ここでは、Font AwesomeというWebフォントを使っています。 Font Awesomeは、Twitter Bootstrapに入っている画像をWebフォントとしてフォントファイル可したものです。 http://fortawesome.github.io/Font-Awesome/ アイコンをWebフォントとして表示するメリット 拡大しても荒れない（Retinaディスプレイでもはっきりくっきり） CSSプロパティを使って大きさや色を設定できる（font-size, color） 拡大しても荒れないという意味ではSVG画像でもよいのですが、SVG画像の場合だと色の変更をしたいときには結局画像自体を修正しないといけないということになってしまいます。 <nav> <ul class="list"> <li><a href="#"><i
Elusive icons, an icons font designed for use with Bootstrap
Elusive Icons is a webfont that can be used with any of your projects. Bootstrap-based, Foundation-based or even your custom projects! It was created by the need for an Open-Source font that can be used in your projects without licencing issues and/or other "attribution" claws. If you don't care much about licences there are many alternatives you can use, most notably the font-awesome font. (UPDAT
IcoMoon : 好きなアイコンをピックアップしてWebフォントにできるサービス
IcoMoon : 好きなアイコンをピックアップしてWebフォントにできるサービス IcoMoon App IcoMoonは以前のエントリーでも紹介したようなアイコンフォントを配布しているサイト。 そしてこのサイトが立ち上げたサービス・IcoMoon Appは自社製のアイコンを始めIconic、Entypo、という3種類のフォントセットの中から好きなフォントをパッケージングしてオリジナルのアイコンフォントを組み立てられるサービスです。 アイコン一覧の中から気に入ったアイコンを選択したら下の『F』ボタンをクリック。 （隣の画像ボタンからそのままSVG画像としてダウンロードすることも可能） するとアイコンに文字コードが割り当てられるのでダウンロードボタンをクリックするとWebフォントとして一式（TTF, SVG,EOT, WOTF, CSS, HTML）がZIPでパッケージングされてダウンロー
はてなダイアリーでGoogle Web Fontsを試す - tikeda's blog
Google Web Fonts!! はてなダイアリーは、今のところ多くのWeb Fontサービスが使えないのですが、Google Web Fontsは、無理やり使う事ができました。このブログでも一部使ってみています。 使い方 Google Web Fontsから使いたいフォントを選択 ページ中の「Use this font」を選択 ページ内のCSSファイルのパスをコピー はてなダイアリーの管理ページ→「デザイン」→「詳細デザイン」→「スタイルシート」欄で以下のようにCSSを@importで指定 @import "http://fonts.googleapis.com/css?family=Lobster"; 上の@import指定をした、下の行あたりに、フォントを変えたい部分にfont-familyを指定 @import "http://fonts.googleapis.com/css?
「コピペできない文章」がコピペできなかった理由 - てっく煮ブログ
html5先日公開した 絶対にコピペできない文章を作ったったwwww はおかげさまで好評だったようで嬉しい限りです。「不思議！」「どういう仕組みなんだ？」という声も多かったので裏側を紹介します。コピペできない訳ではないタイトルは「コピペできない」としていいますが、実際にはコピペはできます。正確に表現すると「コピーすると違う文字になる」という状態になっています。 ではなぜ違う文字になるのでしょうか。結論をいってしまうと「そこにある文字が、人間の目に見える文字とは違う」からです。といっても、これでは分からないですね。今回のために作成された独自フォントトリックの肝は「フォント」です。フォントといえば、文字の見た目を変えるために利用するものです。たとえば、「ほ」という文字を「メイリオ」フォントで表示するとこうなります。フォントを変えて「HG創英角ポップ体」フォントで表示すると、ポップな雰囲気になり
意外と多い!? Web フォントに対応していない環境 〜2012 年の Web フォント事情〜 - てっく煮ブログ
html5Web フォントは「Web サイトにオリジナルのフォントを埋め込む」ための技術です。現行のブラウザーは全て Web フォントに対応している状況です。そんな状況であるため、絶対にコピペできない文章を作ったったwwww は Web フォントに依存したコンテンツでしたが、特別な配慮はせずに公開しました。しかし、公開後、Web フォントが適用されなかった複数の方から「コピペできるんだけどどういうこと？」「意味が分からない」というコメントがよせられました。そこで、Web サーバーのアクセスログを解析して「Web フォントに対応していない環境」がどの程度あったのかを調べてみました。４種類のフォーマット一口に Web フォントといっても、フォントのフォーマットは WOFF・TTF・EOT・SVG の 4 種類あります。今後は WOFF フォーマットが標準になっていくのですが、現在ではサポートし
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TechCrunch | Startup and Technology News