CONDENSE-iconFont
A A B B C C D D E E F F G G H H I I J J K K L L M M N N O O P P Q Q R R S S T T U U V V W W X X Y Y Z Z a a b b c c d d e e f f g g h h i i j j k k l l n n m m o o p p q q r r s s t t u u v v w w x x y y z z 0 0 1 1 2 2 3 3 4 4 5 5 6 6 7 7 8 8 9 9 ! ! " " # # $ $ % % & & ' ' ( ( ) ) * * + + , , - - . . / / : : ; ; < < = = > > ? ? @ @ [ [ \ \ ] ] ^ ^ _ _ ` ` { { | | } } ~ ~ Ä Ä Å Å Ç Ç É É Ñ Ñ Ö Ö
[最新版] Noto Sans JapaneseをWebフォントとして使う方法
Notoフォントは全ての言語に対応することを目指す野心的なフォント。GoogleとAdobeが共同開発したこのフォントは無料で利用できる。 ※Adobeからは、『源ノ角ゴシック』として提供されている。 プログラミング用フォント『Source Code Pro』を開発したAdobeが関わっているおかげか、Notoフォント自体非常に美しい。 そんなNotoフォントは『Google Noto Fonts』なるプロジェクトで無料で公開されている。 Google Noto Fonts 今回は、このフォントをWebフォント ―すなわち、外部からダウンロードして使うフォントとして使う方法を紹介する。 実は面倒くさい、WebフォントでNoto Sans Japanese Type SquareやFONTPLUSなど、Webフォント提供サービスは数多く存在する。サイトを見る端末にフォントがインストールされて
![[最新版] Noto Sans JapaneseをWebフォントとして使う方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/7ef8a0de729a6b521ddc76e88f254c49a93b14e4/height=288;version=1;width=512/http%3A%2F%2Ftoach.sakura.ne.jp%2Fbase%2Fwp-content%2Fuploads%2F2016%2F01%2Fmetro-blur.formatted.jpg)
Webフォント「Google web fonts」の使い方・実装手順メモ
商用・非商用を問わず無料で利用できるWebフォント、「Google web fonts」の実装方法をさっくりメモっておきたいと思います。 Google Web Fonts Google web fontsとは Webページ閲覧時、通常ではパソコンにインストールされているフォントしかブラウザで表示することが出来ませんが、「Webフォント」を使用すると任意のフォントを表示することが出来ます。 Googleの提供するGoogle Web Fontsはアカウント登録の必要も無く、実装が非常に簡単なそれの一つです。商用・非商用ともに無償で利用が可能と言うのもポイント:) ちなみに当サイトでも日付の表示とサイドバー・フッターの見出しにGoogle web fontsの「Coda」を使用しています。 Google web fontsの実装方法 実装の手順は3ステップ。 1.使いたいフォントを選択する 2
いまさら聞けない。Webフォントの基礎とGoogle Fontsの使い方 | クランチタイマー株式会社
こんにちは、デザイナーの中西です。 デザイナーたるもの文字とお友達になってなんぼ！と思いつつも、知れば知るほど遠い存在になってゆく奥深い文字の世界。。。 さて、そんな文字について、Webの世界でも2011年頃からWebフォント元年なんて言われ始めてはや4年。 その登場のおかげで、いまやタイポグラフィがWebデザインの中でグッと重要な存在になり、海外サイトなどではすっかり浸透、多くのサイトで使用されています。 しかし、国内のサイトでは徐々に使用されてるサイトは増えつつあるものの、まだまだ普及段階。 これからデザインに取り入れてみよう！というWebフォント初心者デザイナーのために改めてWebフォントの基本をおさらいしたいと思います。 今さらの今さら、Webフォントって何？ これまでWebの文字表現については、ブラウジングする端末にインストールされたフォントに依存していました。 そのため、意図し
日本語ウェブフォントでサイトを明朝体表示。CSSフォント指定
デザインにおいてフォントは重要です。 しかしウェブ上では日本語フォントはデフォルトのものか 画像に置き換えているのが現状です。 今回は、とくにウェブに向いていないと言われている 日本語ウェブフォントの「明朝体」でのデザインについて 無知なりに解説してみたいと思います。 ちなみに当ブログは「フロップデザインフォント」を使用してます。 webフォントとは、CSSで指定したフォントを表示する方法です。 閲覧者が指定したフォントを持っていなくても 制作者サイドでサーバーにアップしておけば表示可能になるのです。 しかし、これにはいくつか問題があります。 日本語フォントは容量が重いため表示に多少の問題がある。 サーバーにアップするという行為自体が禁止されている。 など実際にはいくつかの壁があります。 ただ今後はこれらの状況も変わってくると思います。 1.Winodws 8.1、OS X Maveric
Retinaでもボケない「シンボルアイコン」を使いこなそう！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうも！デザイナの王です。 2012もいよいよ12月を迎え、果てして2013年は来るのかと、わくわくしている今日この頃です。 ここ最近、AppleのRetinaを皮切りに、超高精細ディスプレイが色んなメーカーから出ているニュースが目に付く。 有名所ではシャープのIGZO（約500ppi）、ジャパンディスプレイのLTPS（約650ppi）などがありますよね、iPhoneのRetinaをぶっちぎりで凌駕してしまうという！4K時代の到来を予感させる！（その前に地球が終わらなければいいのだが！） ということで、来るRetina全盛時代に備えるべく、どんなにモンスター級の高解像度のデバイスでも綺麗に表示する「シンボルフォント」を最近使い始めました。今回はそんな素敵なシンボルフォントの導入法を紹介したいと思います。 そもそも♥「シンボルフォント」♥って何？ 読んで字の如し、「図形のフォント」です。タイ
無料でできる！オリジナルアイコンフォントを作ってみよう | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
みなさんはじめまして！ アートディレクター兼デザイナーの長岡と申します。 社内では、ひろさんと呼ばれています。 入社したばかりですが、どうやらLIGの最年長記録を更新したようです(^^;) 2児の父親として、プライベートでは、子育てに奮闘中なのですが、最近乗り物に興味を持ちだした息子。 電車や車が大好きなようで、テレビに映る度に指をさして「でぇ～んしゃ～♪」とか「ぶぅ～ぶぅ～♪」と叫んでます。 そんな息子の姿を見て、毎日癒されてます(^-^) さて本題に入りますが、スマホサイト・レスポンシブデザイン・Bootstrapなどで度々目にするアイコンフォント。 モバイルファーストを考えながらの制作ですと、表示速度も意識しなければなりませんね～。 フリーのアイコンフォントは、たくさんあれど、「アイコンが多すぎる！」「もっと少なくしたい！」「オリジナルでアイコンを作ったけれども、これをどうにかアイコ
【Webフォント導入】好きなアイコンだけを選んで使えるicomoonの使い方
ほとんど無料ですがいくつか有料のも混ざっています。有料のを選ぶとアイコンセレクト画面ではなく『お金払ってね』的な画面に切り替わりますのですぐわかるかと思います。 また、絵柄ごとにライセンスが異なります。Removeボタンすぐ上のライセンスで確認してください。英語の説明ですが、翻訳サイトを使うとなんとなく意味が分かります。 欲しい画像がみつからなかったら・・・ 上記のところにも欲しいアイコンが見つけられなかった場合、icomoonは自作のアイコンやフリーのSVGアイコンなどもWEBフォント化することが出来るのです。WEBフォント化にすることができるのはSVG形式の画像です。SVG形式の画像はIllustratorなどで作成することができますが、探せば無料で利用できるサイトもたくさんあります。 2014年、無料で商用利用できる最新フリーアイコン素材のまとめ これらを組み合わせれば、さすがに好み
【保存版】Webフォントの使い方と無料のおすすめサイト一覧（日本語・欧文） | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
先週、新婚旅行という人生最大級の贅沢を楽しんできたため、日本に帰ってきて放心状態になっている野田です。 もう少し逃げていたかった……現実から……。 という話は置いておいて。最近LIGのブログではフォントネタが頻繁に登場するようになってきたので、それに僕も便乗しようと思います。 Webに関わっている人でも、「フォントが大事なのはわかるけどWebフォントは設定していない……」 という人も多いんじゃないですか？ 今日はWebフォントの使い方とおすすめの無料で使えるWebフォントサービスをご紹介します。 「わからないこと」が一瞬で解決するかも？ Webデザインを効率的に学びたい、転職・就職を目指している、誰かに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。LIGのスクールでは、現役デザイナーがマンツーマンで指導します！ ▼少しでも気になる方は、ぜひ公式サイトをご覧ください！
Webクリエイターボックス5周年記念プレゼント企画！
Webクリエイターボックス5周年記念プレゼント企画！明けましておめでとうございます！そして早速ですが嬉しいお知らせです。2015年1月4日で、Webクリエイターボックスは5歳になりました！いつも温かいご声援を頂きありがとうございます :D そこで感謝の気持ちを込めて、毎年恒例のプレゼント企画を実施します！Twitterで手軽に応募できるので、ぜひぜひ参加してくださいね！ 当選者の発表たくさんのご応募ありがとうございました！ 1. 「TypeSquare」Web フォント使いたい放題特別プラン@kgsi さん2. バージョン管理ツール「universions」@hisohime さん@_takeuma さん@KiyoTakenaka さん3. 人物専門の写真素材サイト「モデルピース」@kuck1u さん@WEBDA0917 さん4. 快適な姿勢とストレッチを！「2WAY ランバーバックサポー
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
WebフォントにM+をお借りしました！！！｜デジタリアン 4 ameba
デジタリアン 4 ameba IEのことなんか知りません。年中工事中。 このブログの読者になる（チェック） « 英語でHPを作る人･･･ | 記事一覧 | jQueryで記事･･･ » 2011年09月04日(日) 20時15分31秒 WebフォントにM+をお借りしました！！！ テーマ：ウェブデザイン 久しぶりにM+のサイトを見てたらWebフォントが配信されてました（見落としてたかな？）。前から使ってみたいと思っていたんだけどフォントの置き場と気に入ったフォントが無かったので…。M+はお気に入りのフォントの一つなので有効にしちゃいます。 iPhoneでもM+で見れるってなんだか幸せ(笑) M+フォントって？見やすい高品質なフリーフォント。日本語も対応してるけどまだ一部のフォントは難しい漢字とか開発中。（足りないものをIPAフォントで補足したのがMigMixとかMIGUとか） Windows
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
