TAG : Web Fonts

htmlcss Google Fonts の使い方・利用方法

2015年5月31日

Google Fonts(GoogleFonts)の基本的な使い方・利用方法に関するメモ。 内容が古くなっていたので書き換えました。(2017年9月3日) 目次 Google Fonts は「Open Source Fonts」で商用・非商用に関わらず誰でも無料で使用することができる Web フォントを提供するサービスです。 All the fonts in our catalog are free and open source, making beautiful type accessible to anyone for any project.(G…

続きを読む

htmlcss Safari のフォントを調整する

2013年9月12日

Webkit 系のブラウザでは、大きな文字をきれいに表示するためにアンチエイリアスが強くかかり、文字が太って表示されてしまいもっさりした感じに見えることがある。 このため Safari では他のブラウザと比較するとタイトルなどが太く表示されてしまうことがある。 「-webkit-font-smoothing」は、Webkit 系ブラウザ(Safari/Google Chrome/Android等)で文字のアンチエイリアス機能の設定をする CSS プロパティで、以下の値を指定することが可能。 -webkit-font-smoothing の値とその意味 値…

続きを読む

htmlcss Web フォントを簡単にテストできる typewonder

2013年8月18日

typewonder は既存の Web ページを、指定した Web フォントで表示してくれるサービス。使い方はとても簡単。http://typewonder.com/(Typewonder Beta)にアクセスして、試してみたいページのアドレスを入力し、フォントを指定するだけ。 「Typewonder Beta(http://typewonder.com/)」にアクセスして、表示を試したいページの URL を入力して、「Go!」をクリック。 表示されている文字列は、好きな文字を入力して変更することができる。 試したいフォントをクリックして選択して「Use…

続きを読む

htmlcss Google Web Fonts がブラウザによって表示が異なる

2013年5月15日

Google Web Fonts をタイトルのロゴに使用しようとしたが、ブラウザによっては文字がきれいに表示されない。自分の Windows の環境では Firefox と IE ではきれいに表示されるが、Chrome、Safari、Opera では、文字の周りがぎざぎざしていてちょっとそのまま使用するのは難しい。 検索したところ、CSS3 の text-shadow でぼかしを使って対応する方法をみつけたので試してみるがある程度は良くなるが、今度はきれいに表示されていた Firefox と IE で文字がもったりした感じになってしまう。 また、Oper…

続きを読む