[B! webフォント] starneon3517のブックマーク

Ligature Symbols

HTML & CSS Please copy & paste this code to your HTML file or Stylesheet. Simple use for mailto link. <a href="mailto:mail@example.com" class="lsf">mail</a> Use tha icon with text. <a href="http://twitter.com/" class="lsf-icon" title="twitter">Twitter</a> Use tha icon with unicode. <a href="http://amazon.com/" class="lsf-icon amazon">Amazon</a> /* CSS */ @font-face { font-fami

starneon3517 2018/01/11

リンク

[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を使

starneon3517 2017/07/26

リンク

Googleフォントの使い方: Webフォントの表示の仕組みと最適化

Google フォントなど、Webフォントのロードはどういう仕組みなのか、どのように対応できるのか、Google フォントの表示の最適化について紹介します。当ブログでも日本語のGoogle フォントを導入して、1ヵ月が経ちました。文字が読みやすくなったという利点は非常に大きいですが、ロードに時間がかかってしまうという欠点もあります。 Web fonts, boy, I don't know キャプチャ: Google Fonts + 日本語早期アクセス下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Google フォントのロードに何を注意すべきか Webフォントの実装に役立つリソース Google フォントの遅延読み込みまとめ Google フォントのロードに何を注意すべきか私はロンドンで開催された「Polymer Summit

starneon3517 2016/11/22

リンク

Google Web フォント完全ガイド！使い方や参考にしたいサンプル例まとめました。

どんなデザインにおいても、ただしいフォント選びが成功の鍵となります。見た目だけでなく、読みやすさも考えながら、フォントの組み合わせを考えるのに悩んでしまうこともしばしばです。フォントの組み合わせについては、これまでにもいくつか（1/２/３）の記事を紹介していますが、今回は、Google Web フォントを利用した、実用的でデザインも美しいサンプル例をまとめています。目次 Google フォントとは？ Google フォントの実装方法実用で使える、Google フォントの組み合わせ　パート１実用で使える、Google フォントの組み合わせ　パート2 Google Web フォントを見つけやすくする Font Library Google 謹製、日本語 Web フォント「Noto Sans Japanese」 Google Font とは? 通常、ブラウザで表示できるフォントは、ユーザ

starneon3517 2016/05/23

リンク

Typicons - A Free Icon Font by Stephen Hutchings

Typicons are free-to-use vector icons embedded in a webfont for easy use in any UI, whether it be on the web or in a native app. Typicons are free-to-use vector icons embedded in a webfont for use in your user interfaces, whether it be on the web or in a native application. The set of icons are available on Github, with everything included from the source files in SVG format to the minifed CSS. Yo

starneon3517 2016/05/10

リンク

Webフォントを滑らかに表示させるCSS 2016年版 IE 11/Edge/Chrome/Firefox（Windows）

目次ブラウザーによってWebフォントの見え方が違う各ブラウザーの実際の画面で見え方をチェック font-smooth -webkit-font-smoothing transf orm: rotate(0.001deg) text-shadow: 0 0 0.1px rgba(0,0,0,0.5) CSSを適用した状態で各ブラウザーの実際の画面でチェックこのブログ内の関連ページ参考にしたページサンプル画面として使ったサイトこの記事へのネットの反応まとめ ●ブラウザーによってWebフォントの見え方が違う今更ですが、日本語のWebフォントを会社のサイトで使い始めました。元来、Webブラウザは端末にインストールされているフォントを呼び出し文字を表示する。端末のフォント如何では、Webデザイナーが意図しないWeb表示がなされてしまい、またフォントに関するWebデザインに制約が生じてし

starneon3517 2016/02/13

リンク

アイコン型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="#"></a> <a href="#"></i

starneon3517 2014/07/31

リンク

デザイナーなら知っておかないと損するGoogleWebフォント特選10個 | Find Job ! Startup

現在、欧文を中心に600以上の書体が選べるGoogleWebフォント。これだけ数が多いと、どれを選べばいいのか日本人の私たちにはよく分かりません。今回は、全世界で最も使われている人気のGoogleWebフォントを10個厳選してお届けします。海外向けのサイトを作る際にはハズせない、日本向けサイトを作る際にもアクセントとして使いたい、とっておきのGoogleWebフォントを集めました。 GoogleWebフォントを使うメリット GoogleWebフォントを使うと、こんなにもたくさんのメリットがあります。 SEO対策になる修正が簡単に行える選択してコピペできる拡大縮小・高解像度画面（Retina Displayなど）でもボケない使わない手はありません。 GoogleWebフォントの使い方使い方に関しては、OZPAさんのブログが詳しいです。参考にしましょう。今さらながらWe

starneon3517 2013/06/19

リンク

インストールせずに、好きなWeb Fontsを使おう

WebFontsとは WebFontsを利用すると、Web上にあるフォントファイルを読み込んでフォントを表示できます。これまではクライアントPCにインストールされているフォントのみが利用できましたが、WebFontsではクライアントにインストールされていないフォントを表示できるようになります。以下のサンプルはGoogle Web Fontsで提供されるWebFontsを利用しています。サンプルは IE 9／Firefox 6／Chrome 12／Opera 11.5／Safari 5.1 で動作確認済みです。このようにWebFontsを利用することで、さまざまなフォントによる表示や表現ができます。それぞれのフォントにはライセンスがあります。サーバにフォントファイルを格納する場合は、再頒布に該当するため、注意が必要です。フォント提供サービスを使う場合も、ライセンスをしっかり確認しただし

starneon3517 2012/10/19

webフォント

リンク

画像の代わりに使えるアイコンタイプのWebフォントのまとめ

アイコン形式になったWebフォントを集めてみました。これだけ色々揃うと画像を使う場面も減ってくるかもしれませんね。 @font-face { font-family: 'MyWebFont'; src: url('webfont.eot'); /* IE9 Compat Modes */ src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('webfont.woff') format('woff'), /* Modern Browsers */ url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */ url('webfont.svg#svgFontName') format('svg'); /* Legacy i