最新的Web開發教程
 

W3.CSS字體


W3.CSS字體

製作網頁漂亮!

隨著W3.CSS它是非常容易添加新字體的網頁。

  • 使用非常簡單(只有CSS和HTML)
  • 無限制地使用外部字體庫(如谷歌字體)
  • 適用於所有現代瀏覽器

使用字體類

製作網頁!

在你網頁的頭部(或在樣式表),創建一個字體類:

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

在網頁的身體,用類名:

<body>
  <p class="w3-myfont">Making the Web!</p>
</body>
試一試»

使用外部字體

在您的網頁的頭,包括一個外部的字體,並給出字體類:

<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>
試一試»