[CSS]Web制作者が知っておきたい、Webフォントを快適に表示するCSSの新しいプロパティ「font-display」
Webフォントを使用しているサイトやブログが増えてきました。そして、近日アップデートされるChrome 60では、Webフォントの使い勝手を向上する「font-display」プロパティがいよいよ正式に実装される予定です（参考: Chromium）。 追記: さきほどChrome 60がリリースされました。 Webフォントを適用したテキストが読み込み時に一瞬表示されない現象があり、今まではJavaScriptで対応していた人、仕様だとあきらめていた人は、このfont-displayを積極的に取り入れるべきだと思います。 font-display for the Masses 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ブラウザでフォントが読み込まれる仕組み font-displayプロパティとは ほとんどの場合、swapを使
![[CSS]Web制作者が知っておきたい、Webフォントを快適に表示するCSSの新しいプロパティ「font-display」](https://cdn-ak-scissors.b.st-hatena.com/image/square/a833243d7f7fa2de140f06d3243344bf1713f818/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201703%2F2017072510.png)
Google Fontsの日本語フォント「Noto Fonts」の使い方
そしてもちろん我らが日本語も用意されています。日本語のフォントセットは「Noto Sans CJK JP」という名前です。 日本語は優遇されているのか7つも異なるウエイト（太さ）が用意されています。 ちなみに名前にあるCJKとはChina、Japanese、Koreaの3つです。1バイト言語の256文字に収まらない、2バイト言語をまとめてCJKとしているようです。（2バイト文字は65536種類に対応している） 中国語は「Noto Sans CJK SC」、韓国語は「Noto Sans CJK KR」と、それぞれ別のセットで、相互に対応していません。統一感のあるセットになっているとのことですが、それぞれの言語が混在する状況はあまりなさそうです。 2バイト文字は数千もの文字を作成する必要があるため、Adobeだけではなく各書体メーカーの協力しています。それぞれ日本語はイワタ、中国語はChang
超厳選！Googleフォントおすすめ40選を用途別に紹介【導入方法解説付き】 - F Lab.
ユーザの閲覧環境にかかわらず同じ見た目で表示してくれて、しかも超絶カッコイイとあって、爆発的な勢いでウェブ界を席巻しつつあるGoogleフォント。 今回の記事では、そのGoogleフォントの中でも特におすすめの40フォントを雰囲気・用途別に分類し、紹介していく。 紹介の前に フォント選びの基準とコツ ロゴ用と文章用の区別 Googleフォントは重い？ 万能フォント 技術系 ロゴ用 文章用 美容・ファッション系 ロゴ用 文章用 飲食・料理系 ロゴ用 文章用 スポーツ系 ロゴ用 学問系 ロゴ用 文章用 生活系 ロゴ用 文章用 Googleフォントの導入方法解説 Googleフォントにアクセス 使用したいフォントをコレクションに追加する 選んだフォントの詳細情報を指定 WebページにGoogleフォントを導入 CSSファイルにコピペし、Googleフォントを実装！ 紹介の前に フォント選びの基準
Googleフォントをダウンロードし、自前のサーバーに設置して利用する方法
通常のGoogle Fonts利用で起こる問題点 ただ上記の方法は、Googleのサーバー上（fonts.googleapis.com）から直接フォントを呼び出す方法です。 ですので、Googleサーバとの接続に何かしらの不具合があれば、フォントが呼び出されず、表示されないなんてこともあります。 僕も、テーマなどでGoogle Fontsから選んだ「Boogaloo」というフォントを利用しています。テーマでは、以下のような、Evernoteをクリップする用の文字として使用しています。 ただ、最近Googleのサーバーの状態が悪いのか、それとも他に原因があるのかはわかりませんが、Googleフォントが呼び出されず、以下のようにフォントが適用されないで表示されているのをよく見かけました。 「フォントが適用されないだけで、こうも印象が違うものなのか」と思うくらい結構印象が違って見えます。 ですの
Web Fontの使い方とGoogle Fontsのオススメフォント 10選
HTMLとCSSに1行追加するだけで利用できるWeb Font Web FontとはWeb上にあるフォントをブラウザで表示する技術です。 通常ブラウザで表示できるのはユーザーのパソコンにインストールされたフォントだけです。インストールされているフォントはユーザーごとに異なるので、実質使えるフォントはパソコンにデフォルトでインストールされているものだけでした。 サーバ上に保存されたフォントを利用するWeb Fontなら、ユーザーの環境に影響されず意図したフォントで表示することができます。 Web Fontのメリットとデメリット ざっくりとWeb Fontのメリットとデメリットについて触れておきます。 よく理解した上で利用するようにしてください。 Web Fontのメリット 1.ユーザーの環境に依存せず、意図したデザインで表示できる。 「字は体を表す」Webサイトに合わせた最適なフォントでユー
アイコン型WebフォントをCSSでデザインしたボタン10個
アイコン型WebフォントをCSSでデザインしてボタンをいろいろ作ってみました。よく似た記事を書いたことがある気もしますが、今回はフラットな感じにしてみました。 ということで、まずこちらを読み込みます。 <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> これで準備はオッケーですので１つずつ解説します。 1. アイコンのみ 無駄な装飾はせず、普通にアイコンを並べるだけです。こういうのも意外と多いですね。 <div id="social-icon"> <a href="#"><i class="fa fa-facebook fa-2x"></i></a> <a href="#"><i class="fa fa-twitter fa-2x"></i
クレジットカードや決済システムなど、ショッピングサイト用のWebフォント素材 -Payment Webfont
クレジットカードや決済システムのアイコン素材はよく見かけますが、ベクターで手軽に扱えるちょっと珍しいWebフォント素材を紹介します。 Mastercard, VISAをはじめ、Amazon, Google Wallet, Paypalも揃ってます。あと、JCBもあるのは嬉しいですね。 アイコンは全部で36種類、Mastercard, VISA, Amex, JCBなどのクレジットカードをはじめ、Amazon, Google Wallet, Paypalなどのウェブ決済も揃っています。 Mastercard Maestro Visa Visa Electron American Express Postepay Cartasì Diners Club Discover Union Pay Electronic Cash TrustE Amazon JCB Google Wallet Stri
意外と簡単！アイコン風Webフォント使ってみたらブログデザインがグッと洗練されたよ！設定方法を紹介 - ラブグアバ
Webフォント導入のきっかけWebフォントを導入しようと思ったのは以下の記事を拝見したのがきっかけでした。 WEBフォントで簡単に！STINGER3の細かいところにアイコンを入れてみた これを見て「わー、細かいけどこういうの素敵！これは私もパクりたい！オマージュしたい！」と思いたち、やってみることにしました。 で、いきなり結果から書くと、こんな風になります。 黄色の○で囲まれたハートやフォルダのアイコン。これが今回導入したWebフォントなのです。 これがフォント？って思いますよね。そうなんです、こういう一見画像（アイコン）風のデザインをフォントだけできちゃうのがWebフォントの優れたところなんです！ あくまでフォントなので拡大・縮小しても画像が荒くなったりしませんし、CSSでの装飾だって可能です。画像じゃないので表示も軽いです。 どうですか？ちょっと興味わいてきましたか？気になってきたら続
[JS]日本語のどんなWebフォントでも美しくカーニングできるスクリプト -jQuery.Kerning.js
ウェブページで日本語のWebフォントを使用する時にカーニングを適用して、読みやすくて美しく表示するjQueryのプラグインを紹介します。 全角の括弧や句読点などの約物は、日本語のどんなフォントでもスクリプトのみで美しくカーニングできます。 ※文字間のカーニングは、フォントごとに設定が必要です。 jQuery.Kerning.js jQuery.Kerning.js -GitHub jQuery.Kerning.jsのデモ jQuery.Kerning.jsの使い方 jQuery.Kerning.jsのデモ デモでは上：カーニング無し、下：カーニング有りの状態で、明朝とゴシックの2書体がチェックできます。 適用されている方が、読みやすいですね。 ゴシック体のデモ、上：カーニング無し、下：カーニング有り jQuery.Kerning.jsの使い方 Step 1: 外部ファイル jquery.j
Webフォントを利用する際に知っておくと役立ちそうなTipsとかサイトいろいろ - かちびと.net
Webフォントに関して調べ物をしたので 個人的なメモ。少し利用頻度があがって 来たので探しやすいようにまとめておき ます。まだちょっと使い慣れてないので もう少し勉強しないとダメですね・・ スマフォ向けのリソースもあります。 というわけでWebフォントに関するメモです。以前触りだけしか書かなかったのでもう少し深く調べておこうと思い記事にしました。ので、過去の記事と結構重複します。 最低限の知識 最低限かどうか分かりませんけどｗ 少し不明瞭な点もありますので間違いがあればご指摘頂けると幸いです。 ライセンス まずライセンスですが、通常、Webフォントとして利用するには当然フォントの著作者次第になります。 Webフォントとして使うにはサーバーにフォントファイルをアップロードしてcssでファイルのパスを指定して利用するので、フォントファイルが誰でも手に入れられてしまう事になります。（アイコンなん
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
フォントで重要なのは組み合わせ、Googleフォントを使ったオススメの組み合わせ方
Googleフォントで好みのフォントを見つけるのはなかなか大変だけど、これを利用すると簡単に探せる！ -Font Library
新着記事
中国語のWebフォントが使えるサービス「justfont」
日本語Webフォントを使った一味違うWebサイトまとめ