20 Best Google Web Fonts
Web typography is currently riding a wave of relentless creativity. Google Fonts is an invaluable resource for digital designers, the open source nature of its fonts makes it a viable option for both commercial and personal use. With it being a Google tool, Accessibility is of course key, with its high quality selection of web and mobile typography, taking into account legibility and readability.
安全でアクセシブルなアイコン・フォント
Translation of: Bulletproof Accessible Icon Fonts by Filament Group アイコン・フォントを利用する場合、あらゆるユーザーに適切にアイコンを提供しようとすると、かなり気をつける必要があります。そのフォントが読み込まれなかった時にどうなりますか？@font-faceがまだサポートされていないブラウザーでは？ どうすれば安全に(bulletproofに)アイコン・フォントを利用できるかをこれから解説したいと思います。 効率的で機能的なウェブサイトを制作するという、この終わることのない探求において、ベクター形式のアイコンを提供する手段として、簡便であるフォントを利用することが何度も提案されてきました。対して私達は通常ベクター形式のアイコンとしてSVGをIan Featherがブログ書いたような理由から選んで(また、薦めて)おり、既に
インストールせずに、好きなWeb Fontsを使おう
WebFontsとは WebFontsを利用すると、Web上にあるフォントファイルを読み込んでフォントを表示できます。これまではクライアントPCにインストールされているフォントのみが利用できましたが、WebFontsではクライアントにインストールされていないフォントを表示できるようになります。 以下のサンプルはGoogle Web Fontsで提供されるWebFontsを利用しています。サンプルは IE 9／Firefox 6／Chrome 12／Opera 11.5／Safari 5.1 で動作確認済みです。 このようにWebFontsを利用することで、さまざまなフォントによる表示や表現ができます。 それぞれのフォントにはライセンスがあります。サーバにフォントファイルを格納する場合は、再頒布に該当するため、注意が必要です。フォント提供サービスを使う場合も、ライセンスをしっかり確認しただし
Webフォントを指定するには？ - @font-faceの解説 - CSS3リファレンス
@font-faceの解説 Webフォントを指定するには? ＠ルール書式 @font-face { font-family:【フォント集合名】; src:【フォントへの参照】 [ ,【フォントへの参照】... ]; [ 【オプションのフォント記述子】:【オプションのフォント記述子の値】;... ] } 対応ブラウザ IE 9：○ Firefox 10.0：○ Opera 11.61：○ Chrome 17.0：○ Safari 5.1：○ ※現在、動作にベンダープレフィックスが必要なブラウザは、括弧内にベンダープレフィックス付のプロパティを記載しています。 ※ブラウザはWindows 7上で動作確認を行っています。 ※ユーザーの設定より、異なる挙動をする場合があります。 フォント記述子一覧 font-familyとsrcの指定は、省略しても文法的なエラーにはなりませんが、フォントを実際に要
日本語webフォントの設定方法 - 無料日本語webフォントJapanSans
webフォントを使うには CSS3の@font-faceでフォントファイルを指定する必要があります。 @font-faceを使ってフォントファイル名とフォントファイルへのパスを指定します。 パスはアップロードするディレクトリのパスなので、サイトによって異なります。 JapanSans80の例をあげると以下の様になります。 @font-face { font-family: 'JapanSans80'; src: url('http://webfontfan.com/fontcss/font/JapanSans80.eot'); src: url('http://webfontfan.com/fontcss/font/JapanSans80.eot?#iefix') format('embedded-opentype'), url('http://webfontfan.com/fontcss
Bulletproof Accessible Icon Fonts | Filament Group, Inc., Boston, MA
Bulletproof Accessible Icon Fonts Posted by Zach Leatherman 01/13/2014 April 2020 note: Hi! Just a quick note to say that this post is pretty old, and might contain outdated advice or links. We're keeping it online, but recommend that you check newer posts to see if there's a better approach. Care must be taken when implementing icon fonts to ensure a great experience for all users. What happens w
ナウでヤングな CSS Font Loading - Qiita
Web フォントがレンダリングされるタイミングを得ようとすると、そのやんちゃな挙動を制御するため人類は今まで下記のような対策をしてきた。 Web FontsをHTML Canvasで使う canvas要素にwebフォントを確実に描画する方法 typekit/webfontloader 無知な僕は同様の事象にハマり、一通り調べた後、下記の答えにたどり着いた。 canvas に WebFont を指定するとき、一回どこかの DOM で使う WebFont をレンダリングしておかないと死に至る現象を発見したので皆様もお気を付けください — ダメレオン (@damele0n) April 10, 2014 要するに DOM もしくは canvas 上で、そのフォントが指定されていて一度そのフォントがレンダリングされてからでないと canvas 上はレンダリングされない、ということだ。 (ちなみに
アイコンフォントについての備忘録 - NxWorld
デザインとの相性や使いたいものが同セットになっているかなど少しでも選択肢は多い方が良いので、ダウンロードできるサイトを見つけてはメモしていたのですが、結構な数になってきたのでそれらの整理も兼ねたアイコンフォントについての備忘録です。 有償だけど高品質で種類も豊富みたいなセットもあったりするんですが、今回は基本的にフリーで使用できるもので、国内外合わせると全部で34サイトまとめています。 また、アイコンフォントの使用方法についても簡単にですが紹介するので、まだ使ったことがないけど実装したいという場合はそちらを参考にしてみてください。 アイコンフォントについて レスポンシブwebデザインが広まったなどをきっかけに、多くのサイトやブログでも取り入れられているのを見かけるようになったアイコンフォント。 実際に使用したことがある人ならわかると思いますが、本当に手軽に実装できて且つメリットもいろいろと
Add Icon Fonts to Text Links
2013年3月25日 CSS CSS3を使ったアイコンフォントで、テキストリンクをもう少し華やかに！画像を使うと案外手間がかかるテキスト横のアイコンを、Webフォントを使って簡単に表示させましょう。今回はリンク先や拡張子で異なるアイコンを表示する方法を紹介します。 ↑私が10年以上利用している会計ソフト！ アイコンフォントとは？ アルファベット1文字に1つのアイコンが設定されているフォントの総称です。サーバー上にあるフォントファイルを読み込んでフォントを表示する「Webフォント」の応用として使われ始めました。今までのような画像を使ったアイコンとは違い、フォントはベクターファイルなので、サイズを大きくしてもギザギザに見えることはありません。つまりiPhoneやiPadといった高解像度のディスプレイでも、劣化することなくきれいに表示されます。 ただし！何らかの原因でフォントファイルがダウンロー
Top 50 Free Icon Fonts for Web Design
Instead of letters and numbers, an icon font contains glyphs, symbols, or pictograms. They are the simplest way for a UI designer to add icons to a UI design project. One of the great things about using an icon font is its scalability. They can be resized without losing quality, making them perfect for responsive web design. With CSS media queries, they can be scaled up for desktop or down for mob
How To Set Weights And Styles With The @font-face Declaration — Smashing Magazine
If people are on your website, they’re probably either skimming quickly, looking for something, or they’ve found what they’re looking for and want to read it as easily as possible. Either way, keeping text readable will help them achieve their goal. If people are on your website, they’re probably either skimming quickly, looking for something, or they’ve found what they’re looking for and want to
How to use any font you like with CSS3
Custom fonts are among the most potentially appealing aspects of CSS3 for designers. With the font-face rule, you can render any font you have online within your web page text, regardless of whether the user has it installed or not. As with most CSS3 techniques, the basic code is pretty simple, but the practical reality is a little more complex. In this short tutorial, we will run through the basi
Retina revolution - Netvlies
The devil is in the details Detail is probably one of the most important values for a designer, an eye for detail should be in our DNA. As a perfectionist I like my designs to be pixel perfect. I am allergic for “jaggies” and ugly compressed artifacts in icons and images on websites. Apple’s Retina revolution is an interesting evolution that is turning the design world upside down. The Retina disp
35+ awesome and free @font-face kits
With the right fonts, we can do anything, and create anything. Fonts help portray a mood or emotion. Your font choice can make or break your designs, so you must careful in choosing the right one. Typography matters not just because it looks good, but because what's being said is extremely important. Typography in web design is becoming huge. We can now embed and show all sorts of fonts on our web
14 Free Icon Fonts for Web Designers
Trevin serves as the VP of Marketing at WebFX. He has worked on over 450 marketing campaigns and has been building websites for over 25 years. His work has been featured by Search Engine Land, USA Today, Fast Company and Inc. Note: Before using any of the icon fonts below, you should read their license and terms of use. Website design is important to any company that wants to attract customers. Ha
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
What is @font-face and How to Use It in CSS - Designmodo
The @font-face Rule in CSS3 | HTML Goodies
Best Of SEO & Blogging - ImageStation
Thematic WordPress Theme Toolbox: 10 extremely useful hooks