タグ

fontとcssに関するkitsのブックマーク (11)

  • SVGよりアイコン・フォント! な理由

    両者は共にスケーラブルなもの(にできるもの)なのでその点では互角だけど、様々なプロパティーを持ち多彩な表現が可能なSVGの方がフォーマット的には優位にあると言って良い。が、なかなか利用が広まらないSVGに対して、アイコン・フォントの利用は急速に拡大している。単に流行りとみなす向きもあるけど、やっぱりそれなりに理由があるのではないかと思う。 CSSとの親和性 特に以下の3つのCSSプロパティーは効果的に使える。 font-size color text-shadow PNGで作られたアイコンの色を変更するには編集が必要だけど、アイコン・フォントCSSファイルで自由に色を調整することができる。独自実装も含めるなら-webkit-maskプロパティーもとても(想像以上に)効果的に使うことができる。他にもちょっとした位置の調整やなんかも慣れ親しんだCSSで普通に可能。更にこれらをHTMLファイル

    SVGよりアイコン・フォント! な理由
    kits
    kits 2012/07/12
  • 『絶対にコピペできない文章を作ったったwwww - てっく煮ブログ』へのコメント

    ブックマークしました ここにツイート内容が記載されます https://b.hatena.ne.jp/URLはspanで囲んでください Twitterで共有

    『絶対にコピペできない文章を作ったったwwww - てっく煮ブログ』へのコメント
    kits
    kits 2012/04/20
    確認したところ、NoScriptではCSSのfont-faceがデフォルト無効だった。何となく違和感あり。
  • 絶対にコピペできない文章を作ったったwwww - てっく煮ブログ

    html5一見、コピーできるように見えますが、ペーストしてみると・・・。ツイートする

    kits
    kits 2012/04/20
    Webフォントで別の文字に見せている。
  • CSSとJavaScriptで文章をメモ書き風に

    または和文フォントから仮名部分のみ抜き出してサブセット化したものとYahoo! Japanのルビ振りAPIを組み合わせて、ユーザー環境やサーバー性能に左右されずに比較的自由なフォント表現を行うためのイロハ。おれ ここ めも かき なぐる! Demo: Scribble My Tweet #3 フォントのサブセット化 ここでいうサブセット化とはつまりフォントから必要な部分のみ抜き出して再構築すること。Webフォントとして使えるからといって、サブセット化までは許されていないことがあったりするので、それには気をつける必要がある。例として新BSDライセンスで提供されている、きろ字 プロポーショナルを取り上げる。 サブセット化に留まらないWebフォントのジェネレーターとしてFont Squirrelの@font-face Generatorが利用できるが、アップロードするフォントのサイズ制限が厳しい

    CSSとJavaScriptで文章をメモ書き風に
    kits
    kits 2011/04/26
  • 透明なフォント、作ってみました。 - FOXISM

    text-indentを使った画像置き換えはスパム判定の危険あり、“@font-face”の使用をGoogleは推奨 at SMX West 2011 | 海外SEO情報ブログ この記事を読んでいて、はてブのコメントにも以下のように書いた。 では、すべての文字が空白のフォントを作って、それをウェブフォントとして適用させたらどうだろう?全部空白ならファイル容量って小さくならない? (ちなみに自分が書く前にid:s-tomoさんが先に同じようなことを書いてた。やっぱり同じようなことを考える人はいるもんだ。) でもフォントって作った事ないし(でもすごく興味はあるし)どうなんだろうー?と調べていたら、サブドメインサーバー[SE01.CSIDE.JP]<有限会社シーサイドネット>のTTEditというソフトが30日間フル機能で試用できるとのこと。ちゃんと買っても8000円だし…ということでインストール

    kits
    kits 2011/03/31
    透明なフォントであれば画像置換も容易という話。
  • text-indentを使った画像置き換えはスパム判定の危険あり、“@font-face”の使用をGoogleは推奨 at SMX West 2011

    今日のエントリもSMX West 2011のセッションからのレポートです。 text-indentによる画像置き換えの代替手段をGoogleが提示してくれました。 CSStext-indentで-999pxを指定し、文字テキストと画像を置き換えるテクニックは昔からあるごくありふれたテクニックです。 ところがGoogleは、現在この方法を推奨していません。 推奨していないというよりも使うべきでないと明言しています。 使ってもいいのか悪いのかは以前はGoogle社員によって答えがマチマチでした。 しかしここ1年ほどは画像置き換えに対するGoogleのスタンスは一貫して“NG”です。 今回のSMXでも、GoogleのMaile Ohye(マイリー・オイェ)さんが使用すべきでないことをあらためてクリアにしました。 理由は、画像置き換えはスパマーがよく使う手法だからです。 画像置き換えがすぐさまス

    text-indentを使った画像置き換えはスパム判定の危険あり、“@font-face”の使用をGoogleは推奨 at SMX West 2011
    kits
    kits 2011/03/31
    画像化したテキストではなくweb fontを使えということかな。(個別のロゴ用に特化したフォント作成技術が求められる?)
  • WebFonts として利用できるフリーの和文フォント | ヨモツネット

    blog移行しました。新しいblogで更新を続けています。 XMLェ… text ja 2012-07-08 http://www.yomotsu.net/wp/?p=603 XMLェ… 日々の出来事2012年7月8日日曜日 ブログ作りなおそうかなーと思って、この Webサイト をみなおしてたら、Web ページのメタ情報としてダブリンコア (RDF) を混在させていたことを思い出した。バリデーターにかければ、グラフも取り出せて みたいな感じになる。でも結局あまり意味なかったです多分。いまは OGP とかありますしね。 Web ページは XHTML にしてたけど、ブログのコメントで参照先のない数値参照とか混ぜられると XML パースエラーになるし、XML だから他の語彙混在できるけど、RDF くらいしか混ぜてなかったし、XHTML 意味なかったです多分。いまは HTMLSVG 混在でき

    kits
    kits 2011/01/08
  • Bulletproof @font-face: Smiley variation

    CSS の @font-face ルールの「安全な」書式として Paul Irish 氏の提唱する Bulletproof @font-face syntax (邦訳: hail2u.net - Weblog - 安全な@font-faceの書き方(抄訳)) がいつの間にかアップデートされていました。“Smiley variation” と名付けられたその最新版はこうなってます: @font-face { font-family: 'Graublau Web'; src: url('GraublauWeb.eot'); src: local('☺'), url('GraublauWeb.otf') format('opentype'); } “☺”。そう、「スマイリー・フェイス」です。はじめはなにかのジョークかと思いましたがそんなことはなく、マジでした。これを src プロパティのローカル

    Bulletproof @font-face: Smiley variation
    kits
    kits 2010/06/07
  • Re: フォント(TexTsiTe) (agenda)

    なんか今日ドメインからしてユーザビリティの専門「っぽい」サイトを閲覧したのだが、CSSファイルを11、JSファイルを13も使っていて、表示されるまでいちいち時間がかかってイライラしっぱなし。光のように速く表示されるサイトというのは、それだけで様々なリンクを辿ってもらえる可能性が高くなる。主観的満足度も無条件に高くなるし、その他の多くのパラメータにも好影響を与える。だからウェブユーザビリティにおいて速度は最も重視されるべき要素なのに。 で、気を取り直して巡回先をまわってみたら反論できない突っ込みを見つけたので、記事を変更。フォントの話題。 フォントの事に関して言えば「agenda」 のフォントもメイリオになってるようで、俺の環境では文字が潰れてしまって実は前々から読みにくいと感じていた。 フォントTexTsiTe)より 当は、文にfont-familyを指定したくない。というかfo

    kits
    kits 2008/10/03
    「MS PゴシックとかにしているWindowsユーザが気の毒」それはたしかに大きなお世話だ。
  • font-familyの憂鬱 - Webtech Walker

    最近font-familyの指定で悩んでます。少し前までは、下記エントリーのような理由で、ヒラギノ→メイリオ→MS P ゴシックみたいな感じで指定していました。 CSSのfont-family:ヒラギノとMS Pゴシックとメイリオの悩ましい関係 ヒラギノを指定しなくなった理由 わけあってヒラギノをwindowsにインストールする必要がありまして、しばらくインストールしたまま使っていたのですが、windowsでヒラギノの表示は少々汚くて見づらいものがありました。 しかも、ヒラギノで表示されるサイトがかなり多いんです。それに耐えられなくなり、ヒラギノは使うときだけインストールするようにして、いったんアンインストールしました。いくらwindowsにヒラギノを入れているユーザーが少ないといっても、自分でそういう経験をしたので、ヒラギノの指定はしづらくなりました。あと、自分の周りのデザイナーさんとか

    font-familyの憂鬱 - Webtech Walker
    kits
    kits 2008/06/04
    11pxと12pxの違い
  • Adobe - デベロッパーセンター : CSSでのフォント指定について

    鷹野雅弘(Masahiro Takano) 株式会社スイッチ 目次 フォント指定 MACに「MS Pゴシック」? ここまでのまとめ フォントサイズ 印刷用に表示 作成日:2008年2月7日 ユーザレベル:初心者, 中級 製品:Dreamweaver CS3 この記事では、Adobe® Dreamweaver® CS3を使ってフォントフォントサイズの指定を行う方法と、OS/ブラウザでの対応についての実験をご紹介します。 必要ソフトウェア この記事では、以下のソフトウェアを使用しています。 Dreamweaver CS3 体験版 購入 Dreamweaverで、CSSを使ってフォント指定を行う際、迷わず「MS Pゴシック, Osaka, ヒラギノ角ゴ Pro W3」を指定している方が多いのではないかと思います。 これは「MS Pゴシック」がなかったら「Osaka」、「Osaka」がなかった

    kits
    kits 2008/02/13
    vertical-align:baseline;
  • 1