W3.CSS 字体

易于阅读

W3.CSS 页面易于阅读,即使对于有轻微阅读障碍的人也是如此。

  • W3.CSS 默认字体大小为 15px
  • 默认字体是Verdana,字间距合适
  • 默认行距 (1.5) 也很好

HTML 标题 <h1> - <h6>

默认情况下,W3.CSS 以这种方式设置 HTML 标题样式:

实例

<h1>Heading 1 (36px)</h1>

<h2>Heading 2 (30px)</h2>

<h3>Heading 3 (24px)</h3>

<h4>Heading 4 (20px)</h4>

<h5>Heading 5 (18px)</h5>
<h6>Heading 6 (16px)</h6>
亲自试一试 »

Font-Size 类

标题应该用于它们的内容: Headings.

使用 W3.CSS,可以通过以下 w3-size 类设置字体大小:

实例

w3-tiny
w3-small
w3-medium (Default)
w3-large
w3-xlarge
w3-xxlarge
w3-xxxlarge
w3-jumbo
亲自试一试 »

覆盖 W3.CSS 默认值

覆盖 W3.CSS 默认设置非常容易。

你至少有三个选择:

  1. 覆盖页面 <head> 部分中的默认设置
  2. 在W3.CSS之后添加自己的CSS文件
  3. 下载并更改 W3.CSS 文件的内容

在 <head> 中覆盖

h1{font-size:64px;}
h2{font-size:48px;}
h3{font-size:36px;}
h4{font-size:24px;}
h5{font-size:20px;}
h6{font-size:18px;}
亲自试一试 »

添加您自己的 CSS

<link rel="stylesheet" href="https://www.w3schools.cn/w3css/4/w3.css">
<link rel="stylesheet" href="myStyle.css">

修改 W3.CSS

h1{font-size:36px} h2{font-size:30px} h3{font-size:24px} h4{font-size:20px} h5{font-size:18px} h6{font-size:16px}

更改默认页面字体

在你的网页头部(或者你的样式表),加载W3.CSS后,改变html和body的样式:

实例

<link rel="stylesheet" href="https://www.w3schools.cn/w3css/4/w3.css">
<style>
html, body, h1, h2, h3, h4, h5, h6 {
  font-family: "Comic Sans MS", cursive, sans-serif;
}
</style>
亲自试一试 »

W3.CSS 外部字体

Making the web beautiful!

使用 W3.CSS 可以非常容易地向网页添加新字体。

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

使用 Font 字体类

Making the Web!

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

实例

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

在网页正文中,使用字体类名称:

实例

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

使用外部字体

在网页的头部,包含一个外部字体,并给字体一个类名:

实例

<link rel="stylesheet" href="/fonts/css.asp?family=Tangerine">

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

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

实例

<body>
  <p class="w3-tangerine">Making the Web Beautiful!</p>
</body>
亲自试一试 »

更多实例

Making the Web!

实例

<link rel="stylesheet"
href="/fonts/css.asp?family=Lobster">
亲自试一试 »
Making the Web!

实例

<link rel="stylesheet"
href="/fonts/css.asp?family=Lobster&effect=brick-sign">
亲自试一试 »
Making the Web!

实例

<link rel="stylesheet"
href="/fonts/css.asp?family=Allerta+Stencil">
亲自试一试 »

字体效果在 Internet Explorer 9 及更早版本中不起作用。