最新のWeb開発のチュートリアル
 

W3.CSSフォント


W3.CSSフォント

ウェブが美しい作ります!

W3.CSSで、Webページに新しいフォントを追加することは非常に簡単です。

  • (唯一のCSSとHTML)非常に使いやすいです
  • (Googleのフォントのように)外部のフォントライブラリの無制限使用
  • すべてのモダンブラウザで動作

フォントクラスの使用

ウェブを作ります!

ウェブページ(または、あなたのスタイルシート内)のヘッドで、フォントのクラスを作成します。

.w3-myfont {
  font-family: "Comic Sans MS", cursive, sans-serif;
}

あなたのウェブページの本文では、クラス名を使用します。

<body>
  <p class="w3-myfont">Making the Web!</p>
</body>
»それを自分で試してみてください

外部フォントの使用

あなたのWebページのヘッドでは、外部のフォントを含む、フォントにクラスを与えます:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">

<style>
.w3-tangerine {
  font-family: 'Tangerine', serif;
}
</style>

あなたのウェブページの本文では、クラス名を使用します。

<body>
  <p class="w3-tangerine">Making the Web!</p>
</body>
»それを自分で試してみてください

その他の例

ウェブを作ります!

<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Lobster">
»それを自分で試してみてください
ウェブを作ります!

<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Lobster&effect=brick-sign">
»それを自分で試してみてください
ウェブを作ります!

<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Allerta+Stencil">
»それを自分で試してみてください
注意 フォントの効果は、Internet Explorer 9およびそれ以前のバージョンでは動作しません。

ページのフォントを変更します

あなたはw3.cssをロードした後、あなたのウェブページ(または、あなたのスタイルシート内)のヘッドで、htmlと体のスタイルを変更します。

<link rel="stylesheet" href="http://www.w3ii.com/lib/w3.css">
<style>
html , body {
font-family: "Comic Sans MS", cursive, sans-serif;
}
</style>
»それを自分で試してみてください