タグ

webfontに関するnatchonbrikeのブックマーク (12)

  • CSS3のWebフォントを使ってみよう

    CSS3のWebフォント機能は、サーバー上にあるフォントを利用するもので、ユーザーの閲覧環境に依存しません。使用したいフォントファイルをサーバーにアップロードし、CSSで読み込ませるだけで利用できるので、フォントの選択肢が広がります。 これまでテキストを画像化して表現していたWebのタイポグラフィも、Webフォントを使って自由に表現できるわけです。テキストなので、選択やコピー&ペーストも可能、SEOにも有効です。もちろん、font-sizeやcolor、text-shadowなどのCSSプロパティも適用できます。 主要なブラウザは、既にWebフォントに対応しているので、少しの工夫ですぐに利用できます。ただし、フォント形式やライセンスなど、利用に際してはちょっとした注意が必要です。稿では、これら注意点を踏まえてWebフォントの利用方法を紹介します。 Webフォントの利用方法 では早速Web

  • 大分 ホームページ制作|CONDENSE Inc.

    デザインで人と人をつなぎ、社会活動を活性化させ、その結果日々の暮らしが守られる。 そんな現代社会の縁の下の力持ちとしての役割がデザインにはある。 夢のため、目的のため、生きるため。 私たちが少しでもあなたのお役に立てたなら、とても嬉しく思います。 詳しく見る

    大分 ホームページ制作|CONDENSE Inc.
  • アイコンを合字Webフォントとして扱うSymbolSetが革新的にステキ | fladdict

    Symbolset teaser from Symbolset on Vimeo. 正直この発想はなかった! symbolsetは、アイコンに特化したウェブフォント。 このフォントが面白いところは、アイコンを「合字」として割り当てていること。 まずはサイト上部の大きなテキスト部分がエディターになっているので、そこにheartやtweetなどとタイプしてみてほしい。ビックリするはず。 「合字」というのは、特定の文字ペアに特殊文字を割り振れる欧文書体のルール。日ではなじみのない作法だけど、海外ではftやffなど、スペースが空いてしまう文字を特殊な文字で代替することがある。 SymbolSetはこれ利用して、フォントをアイコンとして活用できる仕組みを発明した。 たとえば、♥のアイコンを「heart」という合字に割り振っている。つまり文章内にheartという文字があれば自動的にハートが、「Twi

    natchonbrike
    natchonbrike 2012/07/06
    なるほど合字なら対応環境じゃなくても代替が効くのか。
  • 意外と多い!? Web フォントに対応していない環境 〜2012 年の Web フォント事情〜 - てっく煮ブログ

    html5Web フォントは「Web サイトにオリジナルのフォントを埋め込む」ための技術です。現行のブラウザーは全て Web フォントに対応している状況です。そんな状況であるため、絶対にコピペできない文章を作ったったwwww は Web フォントに依存したコンテンツでしたが、特別な配慮はせずに公開しました。しかし、公開後、Web フォントが適用されなかった複数の方から「コピペできるんだけどどういうこと?」「意味が分からない」というコメントがよせられました。そこで、Web サーバーのアクセスログを解析して「Web フォントに対応していない環境」がどの程度あったのかを調べてみました。4種類のフォーマット一口に Web フォントといっても、フォントのフォーマットは WOFF・TTF・EOT・SVG の 4 種類あります。今後は WOFF フォーマットが標準になっていくのですが、現在ではサポートし

    natchonbrike
    natchonbrike 2012/06/25
    文字はともかく、画像のフォント化は代替がないので要注意。
  • Webフォント TypeSquare

    UD新ゴ M Webフォントは新たな 表現力を提供する 文字が伝えるものは言葉の意味だけではなく、用いられる書体によりその印象は大きく異なります。 ウェブデザインにおいて、さまざまな書体の中から目的に合った Webフォントを選び出し、的確に使うことが必要になります。 リュウミン R-KL Webフォントは新たな 表現力を提供する 文字が伝えるものは言葉の意味だけではなく、用いられる書体によりその印象は大きく異なります。 ウェブデザインにおいて、さまざまな書体の中から目的に合った Webフォントを選び出し、的確に使うことが必要になります。 A1ゴシック M Webフォントは新たな 表現力を提供する 文字が伝えるものは言葉の意味だけではなく、用いられる書体によりその印象は大きく異なります。 ウェブデザインにおいて、さまざまな書体の中から目的に合った Webフォントを選び出し、的確に使うことが必

    Webフォント TypeSquare
    natchonbrike
    natchonbrike 2012/02/22
    モリサワのクラウドフォント今日から。本文に使いたいけど環境によって可読性に差が出そう。
  • ニュース - フォント関連情報 | 企業情報

    株式会社モリサワの企業情報。新着情報、ビジョン、代表挨拶、会社概要、営業所・ショールーム

    ニュース - フォント関連情報 | 企業情報
    natchonbrike
    natchonbrike 2012/02/07
    待ってました!サブセット化は動的にやってくれるかなー。Ajaxの場合どうなるのだろう。とりあえず期待。
  • FONTPLUS|エラー

    ソフトバンク・テクノロジー株式会社 Copyright © Softbank Technology Corp. All rights reserved.

    natchonbrike
    natchonbrike 2012/02/02
    ウェブサイトのページ内の文章を自動で解析。そのページ内に使われている文字だけを抽出し、軽量化したフォントデータを自動で作成します。
  • CSS3のWeb Fontを使ってみたよ。 | Ginpen.com

    英語だけですが……、Google web fontsのリソースとGoogle Font APIを使うと、簡単にWeb Fontを使って、文字のまま装飾する事ができます。 Web Fontって? CSS3で追加される機能で、サーバーに置いたフォントを使ったデザインを作れるようになるものです。 今までもフォントを指定することはできましたが、利用者のマシンにそのフォントがインストールされていないと無意味でした。Web Fontは指定のフォントファイルをダウンロードさせる事になるので、誰が見ても同じフォントで表示されるようになります。 ファイルのダウンロードが必要ってのがネックですね。日語の場合は英語と違ってファイルサイズが膨大になりますから、使いどころは限られそうです……。 Web Fontの使い方 手順はふたつです。 @font-faceでフォントのURLを指定する。 font-family

    CSS3のWeb Fontを使ってみたよ。 | Ginpen.com
    natchonbrike
    natchonbrike 2012/02/02
    実はIE6でもWeb Fontは使用可能
  • Google Font API - Google Code

    How do I start? Read the Getting Started guide. Choose fonts from the Font Directory. Optionally, use the WebFont Loader library for more control over font loading. What are the Google Font API and the Google Font Directory? The Google Font Directory provides high-quality web fonts that you can include in your pages using the Google Font API. The Google Font API helps you add web fonts to any web

  • HTML5のクールなサイト – creamu

    DIVE INTO HTML5というサイトを見つけました。 HTML5でサイトを作っていますね。フォントには@font-faceを使って、EOTファイルを使っています。 HTML5からWeb Fontsとして、サーバにフォントファイルをアップロードすることで、ユーザのPCにインストールされていないフォントでも利用できますが、IEはライセンス情報を埋め込んだ特殊なフォントファイル(EOTファイル)のみ認識するため、別途EOTファイルの作成が必要です。その対応をしているようですね。 デザインフォントに見えるところも、テキストになっているので、なかなかいい感じです。 DOCTYPE宣言と文字コード指定もシンプルですね。 HTML5の参考に、ぜひ見てみてください。 Dive Into HTML5 ウィンドウのサイドにFollow meボタンをつけました。と思ったらフォロワーが一気に、いつもより多い

    natchonbrike
    natchonbrike 2009/11/10
    ウェブフォントの素敵使用例
  • 日記 | ヨモツネット

    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 混在でき

  • GoogleがWebフォントサービスを開始 - フォントブログ

    Webフォントが一般に広まった全盛期には国内外含め様々なWebフォント配信サービスが登場しましたが、まさに戦国時代そのもので、数年後には多くのサービスが終了となってしまいました。 2023年現在、利用されているWebフォントサービスをまとめてみました。 Google Fonts 完全無料で誰でも利用可能ということもあり、現在一番利用されているGoogle Fonts。定番のNoto Sans以外にも、ZEN 角ゴシックやBIZ UDゴシックなど、プロ仕様の日フォントも使えます。デスクトップ用のフォントもダウンロード可。 Adobe Fonts Adobe Creative Cloud契約者なら誰でも使えるAdobeのフォントサービス。かつてはTypekitの名でサービス展開されていました。完全に日語化され昔に比べるととても使いやすくなりました。デスクトップ用のフォントもダウンロード可

    GoogleがWebフォントサービスを開始 - フォントブログ
  • 1