W3.CSS Fonts (字体)
易于阅读
W3.CSS 页面易于阅读，即使对于轻度阅读障碍者也是如此。
- W3.CSS 默认字体大小为 15px
- 默认字体为 Verdana，字母间距良好
- 默认的行距（1.5）也很好
HTML 标题 <h1>-<h6>
默认情况下，W3.CSS 通过以下方式设置 HTML 标题的样式：
实例
<h1>标题1（36像素）</h1>
<h2>标题2（30像素）</h2>
<h3>标题3（24像素）</h3>
<h4>标题5（18像素）</h4>
<h5>标题5（18像素）</h5>
尝试一下 »
点击“尝试一下”按钮查看在线实例
字体大小类
标题应按原样使用：标题。
使用 W3.CSS，可以通过以下 w3- size 类设置字体大小：
覆盖 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
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" >
<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.com/w3css/4/w3.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" >
<style>
html, body, h1, h2, h3, h4, h5, h6 {
font-family: "Comic Sans MS", cursive, sans-serif;
}
</style>
尝试一下 »
点击“尝试一下”按钮查看在线实例
W3.CSS 外部字体
使用 W3.CSS，将新字体添加到网页非常容易。
- 非常易于使用（仅 CSS 和 HTML）
- 无限使用外部字体库（如 Google 字体）
- 适用于所有现代浏览器
使用字体类
在网页的顶部（或样式表中），创建一个字体类：
实例
.w3-myfont {
font-family: "Comic Sans MS", cursive, sans-serif;
}
在网页的正文中，使用字体类名称：
使用外部字体
在网页的顶部，包括一个外部字体，并给该字体一个类名：
实例
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine" rel="external nofollow" target="_blank" >
<style>
.w3-tangerine {
font-family: 'Tangerine', serif;
}
</style>
在网页的正文中，使用类名称：
更多例子
实例
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Lobster" rel="external nofollow" target="_blank" >
尝试一下 »
点击“尝试一下”按钮查看在线实例
实例
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Lobster&effect=brick-sign" rel="external nofollow" target="_blank" >
尝试一下 »
点击“尝试一下”按钮查看在线实例
实例
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Allerta+Stencil" rel="external nofollow" target="_blank" >
尝试一下 »
点击“尝试一下”按钮查看在线实例
字体效果在Internet Explorer 9及更早版本中不起作用。
更多建议：