FOUT
Flash of Unstyled Textの頭文字をとってFOUTと呼ばれる現象がある。FirefoxでWebフォントの読み込みが完了するまで別のフォントが使われる現象のことで、後にSafariやChrome、Internet Explorerで起こるようになった読み込みの完了まで空白になる現象のことも含めてFOUTと呼ぶことが多い(気がする)。このWebサイトでも起こっていて、それについて聞かれたのでさらっと書いてみる。 この現象の原因はCSSの処理やWebページのレンダリングと並行してWebフォントのHTTPリクエストが行われることにあるので、仕様と言って良い。起こらないようにするにはWebフォントの読み込みが終わるまで他の処理をブロックするとかしないといけないため、改善される可能性はあるけどまず直ることはない。日本のWebサイトではあまり起こらないように感じるのは、Webフォント自
Webフォント・サービス FONTPLUS ｜ ためし書き
お使いのブラウザではご覧いただけません お手数ですが、最新の対応ブラウザ（Chrome／Edge／Firefox／Safari）にて再度ご覧ください。
Chip Cullen
Blog Posts February 6, 2024 In praise of the switch statement A tutorial on how to use an underused tool in Javascript - the switch statement. January 23, 2024 Project stuck? Think about how you’re breaking it down & question everything If you find yourself in the middle of a project that doesn’t seem to be moving forward - take a step back and question everything. January 22, 2024 So how did the
Streamline your web font requests. Introducing “text=”
Oftentimes, when you want to use a web font on your website or application, you know in advance which letters you’ll need. This often occurs...
CSSとJavaScriptで文章をメモ書き風に
または和文フォントから仮名部分のみ抜き出してサブセット化したものとYahoo! Japanのルビ振りAPIを組み合わせて、ユーザー環境やサーバー性能に左右されずに比較的自由なフォント表現を行うためのイロハ。おれ ここ めも かき なぐる！ Demo: Scribble My Tweet #3 フォントのサブセット化 ここでいうサブセット化とはつまりフォントから必要な部分のみ抜き出して再構築すること。Webフォントとして使えるからといって、サブセット化までは許されていないことがあったりするので、それには気をつける必要がある。例として新BSDライセンスで提供されている、きろ字 プロポーショナルを取り上げる。 サブセット化に留まらないWebフォントのジェネレーターとしてFont Squirrelの@font-face Generatorが利用できるが、アップロードするフォントのサイズ制限が厳しい
透明なフォント、作ってみました。 - FOXISM
text-indentを使った画像置き換えはスパム判定の危険あり、“@font-face”の使用をGoogleは推奨 at SMX West 2011 | 海外SEO情報ブログ この記事を読んでいて、はてブのコメントにも以下のように書いた。 では、すべての文字が空白のフォントを作って、それをウェブフォントとして適用させたらどうだろう？全部空白ならファイル容量って小さくならない？ （ちなみに自分が書く前にid:s-tomoさんが先に同じようなことを書いてた。やっぱり同じようなことを考える人はいるもんだ。） でもフォントって作った事ないし（でもすごく興味はあるし）どうなんだろうー？と調べていたら、サブドメインサーバー［SE01.CSIDE.JP]＜有限会社シーサイドネット＞のTTEditというソフトが30日間フル機能で試用できるとのこと。ちゃんと買っても8000円だし…ということでインストール
HTML5&CSS3入門 with HTML5 パック 第4回 @font-face（ウェブフォント）の利用 | デベロッパーセンター
本連載では、Webデザイナーに向けて、HTML5／CSS3でWebデザインや制作手法はどう変わるのかを解説していきます。主なHTML5／CSS3の役割や機能を学んでいただくとともに、サンプル作成を通してコーディング手法を習得していただくことを目的としています。なお、サンプル作成のツールとして「HTML5 パック for Dreamweaver CS5」を使用します（詳しくは、「HTML5 Pack for Dreamweaver CS5 の使い方」をご覧ください）。HTML5 パックをインストールするには、Dreamweaver CS5のアップデータ11.0.3を適用する必要があります。 ※HTML5とCSS3は現在策定中の草案です。本連載は執筆時点の草案の内容にもとづいており、正式に勧告されるまでに変更されることもあり得ます。 これまでの記事では、CSS3で新たに登場する border
Google Web Fontsの全書体をプレビュー
Google Web Fontsの全書体を一気にプレビューするツールを作った。公式のFont Previewerを使ってるとサンプル文字列が突如リセットされたりとかアレだったので……。 使い方は左の入力ボックスにプレビューに使う文字列を、右のテキストボックスにフォントサイズをpx単位の数字で入力してボタンをクリック。クリック！ 手抜きなのでEnter押してもダメ！ すると下にズラッとプレビューされる。太字にしたりスモールキャプスにしたりとかの細かいスタイル指定はFirebugやDeveloper Toolsとかでやれば良いと思う。.previewというクラスのスタイルをいじれば反映される。contenteditable使ったスタイル編集機能とかなら付けてもいいかもしれない。 ソースを見ればわかる通りYQLで公式のFont Previewerをスクレイピングしてフォント名一覧を入手し、あとは
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
