W3.CSS 字体

创建于 2024-12-03 / 47

字体： [默认] [大] [更大]

易于阅读

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

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

HTML 标题 <h1> - <h6>

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

实例

<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 默认设置非常容易。

你至少有三个选择:

覆盖页面 <head> 部分中的默认设置
在W3.CSS之后添加自己的CSS文件
下载并更改 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

修改 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的样式:

实例

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> 亲自试一试 »

使用外部字体

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

实例

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

实例

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