タグ

ブックマーク / hail2u.net (43)

  • Google ChromeでMS PゴシックをArial+メイリオに置換する

    最近のブラウザではWebフォントの利用を可能にする@font-faceをサポートしており、使われているサイトもよく見かけるようになった。@font-faceはWebフォントの利用に限らず、ローカルのフォントの再定義にも使えるので、ユーザースタイルシートで利用すればMS Pゴシックをメイリオに置換することが出来る(Chromeでも)。これに留まらず@font-faceデスクリプターのunicode-rangeプロパティを利用すれば、英数字はArialで日語部分はメイリオで置換するなどというわがままなことが出来る。 unicode-rangeプロパティはグリフのコードを範囲指定することによってsrcプロパティで指定されているフォントのどの部分を利用するかを決定するもの。つまりArialから英数字(PDF: Basic Latinと呼ばれる範囲)を取ってきてMS Pゴシックを置換する場合はGo

    Google ChromeでMS PゴシックをArial+メイリオに置換する
  • CSS Color Keywords

    CSSでは色の値として#RRGGBBやrgb(r, g, b)等の他にキーワードでも指定できる。CSS3では大幅に拡充され、140種類のキーワードのサポートが明記された。今まであまり使ったことがなかった上に、英語力の欠如からDarkOrangeやLavenderとかならまだしもBlanchedAlmondとか言われてもどんな色か想像すらできないので、一覧してクリックで背景色としてプレビューできる簡単なツール、CSS Color Keywordsを作った。DarkOliveGreenとかRGBで考えるとなかなか大変だけどキーワードなら簡単! ページを開くと色のキーワードを背景色としたブロックが並ぶ。最初のbodyの背景色はランダムに決定されるが、その後はそれぞれの色のブロックをクリックするとその色が背景色になり、プレビュー出来る。 見出しや色のキーワードのフォントはYanone Kaffee

    CSS Color Keywords
  • 安全な@font-faceの書き方(抄訳)

    Internet Explorerではかなり昔からあった埋め込みフォント(@font-faceによるフォントの参照)の機能は、Safari 3とFirefox 3.5で有効になったことから急速に話題になることが増えた。ようやく時代がMicrosoftに追いついてきた感じですね。その書き方は大筋では一緒なのだが、細かな仕様の違い、というかIEがEmbedded OpenTypeしかサポートしていないことから工夫が必要になる。その工夫をBulletproof、つまり将来にわたって安全であろうという観点で短くまとめたBulletproof @font-face syntaxというすごく参考になったエントリがあったので訳しておく。語調などは超訳なので、原文とニュアンスが変わっているかもしれない。 安全な@font-faceの書き方 以下は訳注と私見。 条件付コメント 面倒くさいというのはわからなく

    安全な@font-faceの書き方(抄訳)