タグ

ブックマーク / qiita.com/cognitom (2)

  • Web用のシンボルフォントを作る現実的な方法 - Qiita

    注・こちらの記事はやや内容が古くなっているので、Symbols for Sketchをどうぞ リブライズのアイコンをWebフォント化するにあたり、色々はまってしまったので、さくっとシンボルフォントを作るためのテンプレートをGitHubに公開しました。Ligature (合字) を使った方法が最近のトレンド(?)ですが、デザイナがしょっちゅう更新をかけるような場合、うまく使えるツールがないのが現状。ここでは、Font Awesomeなどと同様に、UnicodeのPUA (プライベート領域) にフォントを割り付ける、比較的「枯れた」方法をとります。 このテンプレートを使うのに、必要なソフトは2つ。 Adobe Illustrator Glyphs mini Glyphs mini は比較的最近出てきたGlyphsというフォント作成環境の廉価版です。シンボルフォントを作るには十分な機能を備えてい

    Web用のシンボルフォントを作る現実的な方法 - Qiita
  • CSS内の画像埋込で高速化(Data URI) - Qiita

    スタイルシートの中で画像を多数呼出していると、HTTPリクエストが大量発生してページの読み込みが遅くなります。このような場合、CSS Spriteを使って回避することが一般的ですが、Data URIを使うと運用はもっと簡単です。 CSSファイルへの埋込 例えばOSSCafeの場合、サイトのCSS内で16ほどの画像ファイルを読込んでいます。 body { background-image:url(images/body.png) } body>header { background-image: url(images/header.png) } body>header div.center>h1 { background-image:url(images/logo.png) } ...(略) body { background-image:url(data:image/png;base64,

    CSS内の画像埋込で高速化(Data URI) - Qiita
  • 1