お使いのブラウザではご覧いただけません お手数ですが、最新の対応ブラウザ(Chrome/Edge/Firefox/Safari)にて再度ご覧ください。
お使いのブラウザではご覧いただけません お手数ですが、最新の対応ブラウザ(Chrome/Edge/Firefox/Safari)にて再度ご覧ください。
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がブログ書いたような理由から選んで(また、薦めて)おり、既に
目次 やわらか・繊細系の日本語フォント 12種類 力強い太文字系の日本語フォント 8種類 手書き・毛筆系の日本語フォント 6種類 レトロ系の日本語フォント 3種類 コミック系の日本語フォント 2種類 民芸風の日本語フォント 2種類 変わり種の日本語フォント 4種類 フォントを利用する際は必ず規約の確認を 商用利用の可否や条件については調査し記載していますが、商用利用のみ有料版の購入が必要だったり、配布元への連絡だったりする必要なケースもあります。ご利用の際は、必ずフォント配布元サイトで利用規約をご確認ください。 1. やわらか・繊細系の日本語フォント 12種類 落ち着いた優しいデザインにマッチする、繊細なフォントを集めました。癖が強くなく使いやすいものが多いので、重宝できます。 イマジン・ヨコハマフォント イマジン・ヨコハマフォント ひらがな・カタカナに加え、横浜市に関連する漢字が使えます
2015年2月28日 著 昨日付けでRe: レスポンシブデザインって本当に使える?レスポンシブを避けるべき3つの理由という記事を公開したばかりでアレですけど、他人の記事に反応するというのは非常に難しいな、と思っています。 僕の場合、Web上では記名で活動していますが、いくら個人サイトの全ページにコンテンツにある意見や見解は、個人の立場において述べたものであり、所属組織等を代表するものではありませんと記したところで申し訳程度でしかなく(勤務先などググれば一発でわかります)、ここ(どこ)に書いた記事が予想外のところに意図せぬ影響を招く可能性なり危険性は、常に意識しているつもり。結局のところ、それに起因する不自由さとか窮屈さを上回るメリットがあると考えているからこそ、個人サイトの運営を含め記名での活動を続けているのですけどね。匿名か記名かという論点はさておき、Webアクセシビリティをどうやって普
WebFontsとは WebFontsを利用すると、Web上にあるフォントファイルを読み込んでフォントを表示できます。これまではクライアントPCにインストールされているフォントのみが利用できましたが、WebFontsではクライアントにインストールされていないフォントを表示できるようになります。 以下のサンプルはGoogle Web Fontsで提供されるWebFontsを利用しています。サンプルは IE 9/Firefox 6/Chrome 12/Opera 11.5/Safari 5.1 で動作確認済みです。 このようにWebFontsを利用することで、さまざまなフォントによる表示や表現ができます。 それぞれのフォントにはライセンスがあります。サーバにフォントファイルを格納する場合は、再頒布に該当するため、注意が必要です。フォント提供サービスを使う場合も、ライセンスをしっかり確認しただし
CPI x CSS Nite x 優クリエイト「After Dark」(12)フォローアップ:酒井 優さん(WEBCRE8.jp) 記事公開日:2014年7月23日(水) 2014年7月17日、KDDIウェブコミュニケーションズ セミナールームで開催したCPI x CSS Nite x 優クリエイト「After Dark」(12)Web Fonts特集のフォローアップとして、酒井 優さん(WEBCRE8.jp)の『2014年版Webフォントの使用方法とこれまでの歩み』セッションのフォローアップを公開します。 スライド Webフォントはとりあえず導入するだけなら本当に手軽に利用することができます。アイコンなどの利用もそんなに難しいものではないので、デモを触って実際のコンテンツに組み込んでみたり、CodePenやjsdo.itなどのサービスを用いて自分で用意したフォントを表示させてみることから
43. Typography: Corporate typefaces As with our logo, consistent use of our corporate typefaces—Adobe Clean and Minion® Pro—reinforces Adobe’s brand identity. Both are OpenType™, a cross-platform format that provides richer linguistic support through widely expanded character sets and advanced layout features. Both fonts are available for download from Marketing Hub under Corporate > Corporate Fon
@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フォントを使うには 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
美しい日本語フォント「Noto Sans CJK JP」をWordPressに導入する方法です。 「Noto Sans」とはGoogle等が開発した、無料で使える美しい日本語フォントです。美しい日本語フォント「Noto Sans CJK JP」をWordPressに導入する方法です。 「Noto Sans」とはGoogle等が開発した、無料で使える美しい日本語フォントです。 このページに来た方は、既にNoto Sansに興味がある、もしくは導入方法を探している方だと思いますのでNoto Sansの説明は省きます。 (文字の例) 参考にさせて頂いた解説サイト 今回、僕がnoto sansを導入するにあたり参考にさせて頂いたサイトです。 おち研 - Google・AdobeオープンソースのNoto Sans fontがジワジワ凄い noto san CJKの成り立ちや、noto = no豆腐の
2015年2月27日 著 レスポンシブデザインって本当に使える?レスポンシブを避けるべき3つの理由という記事を読みました。冒頭の最近では、新規にウェブサイトを構築する場合、避けた方が良い=PCとスマホのページは分けて作った方が良いと考えられていますというくだりにしろ、末尾にある手間もコストもかかるわりに表示の不具合が多発するレスポンシブデザインは、導入を検討される企業はまだまだ多いものの、現在は下火になってきていますというくだりにしろ、自分の経験や認識とはだいぶ乖離しているように感じるのですが、それはさておき、挙げられていたレスポンシブを避けるべき3つの理由のどれ一つとっても、賛同できるものではありませんでした。 コストが増える? 1つのファイルでPCとスマホのサイトをうまく表示させるのは、非常に複雑な作業です。CSSで調整を行っていくことになりますが、これは別々のサイトを作るよりも手間の
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く