タグ

web-fontに関するFalkyのブックマーク (9)

  • トライアウト | Webフォント TypeSquare

    ホーム トライアウト TypeSquare Web Font Tryout は TypeSquareで配信されるフォントを使って、 あなたのWebサイトの書体を自由に変更できます。 ページの下にあるフィールドでURLを入力して「Tryout」をクリックすると ご自分のページにTypeSquare を適用した様子を見ることができます。 1フォントの選択 TypeSquareでご利用いただけるすべてのフォントをお選びいただけます。 2一覧・選択履歴からフォントを選択 をクリックすると、書体一覧や選択履歴から書体を選択できます。 3フォントの大きさ、行間の編集 をクリックすると、2つのスライダーで「文字サイズ」と「行間」を調整できます。 4現在のスタイルを保存 ページに適用したスタイルを3つまで保存できます。 ※別のブラウザからは呼び出せません

    トライアウト | Webフォント TypeSquare
    Falky
    Falky 2016/11/09
    日本語ウェブフォントを実際に任意のサイトに適用してプレビューできるツール
  • リガチャなアイコンフォントをお手軽に作成する - アインシュタインの電話番号

    リガチャなアイコンフォントを自作しようとするとけっこう大変そうで、そのためのアプリを揃えて操れるようになったり、リガチャの仕様を把握したり、専用のCSSを書いたりする必要がある。そういった正攻法のやり方としては、このページがとてもわかりやすかった。また、実際にそのページの方法によって制作されたLigature Symbolsも魅力的。 ところが自分が欲しいのは、Twitterで使っているアバターアイコンと、ブログのボタン等で使う5〜6個のアイコンを含んだ最小のセットで良くて、そのために前述のような気を出して作るのは、なかなか重い腰があがらずにいたところ、アイコンフォントを手軽に生成できるサービスIcoMoonの中に、そのリガチャを作成する機能もあることに気がついた。^1 それを使ってみたら、予想以上に簡単にリガチャなアイコンフォントをサクッと作れた。 上のはそのIcoMoonを使って作っ

    リガチャなアイコンフォントをお手軽に作成する - アインシュタインの電話番号
  • Webフォント TypeSquare

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

    Webフォント TypeSquare
    Falky
    Falky 2014/04/09
    無料でバナー無しで1書体いける
  • M+Web FONTS Subsetter

    M+Web FONTS SubsetterこのWebアプリケーションはM+ OUTLINE FONTSのサブセットを生成するツールです。 生成したフォントはWebフォント(woff形式,eot形式,ttf形式)としてそのまま利用できます。 M+ OUTLINE FONTSとはM+ OUTLINE FONTS はコンピュータなどでの個人利用をはじめ、商業目的での利用、フォント内容の改変、改変後の再配布にも制限の無い、自由なライセンスで公開されているアウトラインフォントです。 詳細はこちら

  • ゆめいろデザイン|ブランドマネージャー・Web/UX/UIデザイナー・デザインコンサルタント ヒガシナオヤ

    fonts.comの日語Webフォント「AXISフォント」を導入してみたら、学生さんから「どんなフォントを使っているのですか?」と質問が来たのでブログ記事にしてみます。 海外のWebフォントサービスです。海外のベンダーさんには珍しく日語Webフォントを扱っています。ちなみに、日語にローカライズされていますが、翻訳がものすごく変です。 取り扱っている主な日フォントは次の通りです。 AXISフォント(AXIS株式会社) ダイナフォント(ダイナコムウェア株式会社) イワタフォント(株式会社イワタ) モトヤフォント(株式会社モトヤ) 変わったフォントとして、なぜか「MS ゴシック」「MS 明朝」シリーズも取り扱っています。 fonts.comを使ってみるときに知っておく点がいくつかあります。 無料で使えますが、バナーが表示されます。そして、日語Webフォントは使えません。 有料プランに

    ゆめいろデザイン|ブランドマネージャー・Web/UX/UIデザイナー・デザインコンサルタント ヒガシナオヤ
    Falky
    Falky 2014/04/09
    fonts.comってAXIS使えたのか!知らなかった!ちゃんとCondensedなんかもあるぞ!!
  • Glyphs Miniでアイコンフォントを作る方法 - MEMOGRAPHIX

    アイコンをwebfontにするの、数年前から流行ってて、確かに便利ということがある。[Font Awesome](http://fontawesome.io/)とかが有名。 アイコンフォント、自分でも作れそうだったので作り方まとめた。 ## 用意するもの - [Glyphs Mini](https://itunes.apple.com/jp/app/glyphs-mini/id469036911?mt=12&uo=4&at=11l8Mb) - Adobe Illustrator Glyphs Miniはフォント作るアプリ。Mac App Storeで買える。 具体的な手順1.Illustratorの準備1792*1792pxのドキュメントを新規作成する環境設定 -> ガイド・グリッド で、グリッド128px、分割数2にする 「グリッドを表示(⌘+¥)」するアートボードにグリッドが14マスで

  • Montserrat - Google Fonts

    The old posters and signs in the traditional Montserrat neighborhood of Buenos Aires inspired Julieta Ulanovsky to design this typeface and rescue the beauty of

    Montserrat - Google Fonts
    Falky
    Falky 2013/05/27
    LIGで数字に使ってた。かわいい
  • Get Started with the Google Fonts API  |  Google for Developers

    Get Started with the Google Fonts API Stay organized with collections Save and categorize content based on your preferences. This guide explains how to use the Google Fonts API to add fonts to your web pages. You don't need to do any programming; all you have to do is add a special stylesheet link to your HTML document, then refer to the font in a CSS style. A quick example Here's an example. Copy

    Get Started with the Google Fonts API  |  Google for Developers
    Falky
    Falky 2013/03/23
    Google Font APIは、必要な任意の文字だけをリクエストすることで最適化できる。1グリフだけ持ってくるとか。
  • 安全な@font-faceの書き方(抄訳)

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

    安全な@font-faceの書き方(抄訳)
    Falky
    Falky 2012/06/30
    どうもOperaとIEで動いていないような気がするのだがよくわからない。
  • 1