@blog.justoneplanet.info

日々勉強

Google font api(directory)を使ってみる

ヘッダに以下を追加する。

<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>

cssに以下を追加する。

p {
    font-family: 'Lobster', arial, serif;
}

そうすると以下のように表示される。

Hello, world.

■探究

http://fonts.googleapis.com/css?family=Lobsterをブラウザ別で比較する。

Google Chrome

どうやらスクリーンに絞ってるらしい。

@media screen {
@font-face {
  font-family: 'Cantarell';
  font-style: normal;
  font-weight: normal;
  src: local('Cantarell'), url('http://themes.googleusercontent.com/font?kit=tGao7ZPoloMxQHxq-2oxNA') format('truetype');
}
}

いわゆるCSS3のWeb Fontsだ。

Firefox

@mediaが無い以外は大体chromeと同じだ。

@font-face {
  font-family: 'Cantarell';
  font-style: normal;
  font-weight: normal;
  src: local('Cantarell'), url('http://themes.googleusercontent.com/font?kit=tGao7ZPoloMxQHxq-2oxNA') format('truetype');
}

CSS3のWeb Fontsだ。

IE6~8(かわいそうなブラウザ)

なんか読み込んでるファイルが違う。

@font-face {
  font-family: 'Cantarell';
  src: url('http://themes.googleusercontent.com/font?kit=tGao7ZPoloMxQHxq-2oxNA');
}

http://ascii.jp/elem/000/000/465/465458/index-2.html

IEでWebフォントを使うには、一般的なTTF/OTF形式ではなく、独自のEOT(Embedded Open Type)形式のフォントを用意する必要がある。

コメントはまだありません»

No comments yet.

RSS feed for comments on this post.TrackBack URL

Leave a comment