W3C中文教程
全球最大最新的中文 Web 技术教程
HTML CSS SQL PHP COLORS MYSQL BOOTSTRAP
 

W3.CSS 字体



W3.CSS 字体

Making the web beautiful!

使用W3.CSS,向网页添加新的字体是非常容易的。

  • 很容易使用(只有CSS和HTML)
  • 无限制使用外部字体库(如Google字体)
  • 适用于所有现代浏览器

使用字体类

Making the Web!

在您的网页(或您的样式表)的头部,创建一个字体类:

Example

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

在您的网页的正文中,使用类名:

Example

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

使用外部字体

在您的网页的头部,包含一个外部字体,给字体设置一个类:

Example

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

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

在您的网页的正文中,使用类名:

Example

<body>
  <p class="w3-tangerine">Making the Web!</p>
</body>
尝试一下 »


更多实例

Making the Web!

Example

<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Lobster">
尝试一下 »
Making the Web!

Example

<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Lobster&effect=brick-sign">
尝试一下 »
Making the Web!

Example

<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Allerta+Stencil">
尝试一下 »
Note 字体效果在Internet Explorer 9及更早版本中不起作用。

更改页面字体

在您的网页(或您的样式表)的头部,加载w3.css后,更改html和body的样式:

Example

<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<style>
html , body {
font-family: "Comic Sans MS", cursive, sans-serif;
}
</style>
尝试一下 »